图像和文本响应 Css
Reponsive Css For Image and Text
我有一个非常简单的代码，旁边只有一些文本和图片（带标题），并且在计算机上运行良好。但是在 phone 上，它根本没有响应。我该如何解决？在较小的屏幕中，图片是在文字上方还是文字旁边都没有关系。
.about-image {
/*position: relative;
display: inline-block; /* Make the width of box same as image */
float: right;
z-index:1;
margin-top: 75px;
margin-bottom: 75px;
margin-right: 30px;
}
.about-image .overlay {
font-family: "Raleway", "";
/*
position: absolute;
*/
bottom: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.8);
font-family: Arial,sans-serif;
color: #fff;
width: 100%; /* Set the width of the positioned div */
height: 5%;
}
.overlay a {
text-decoration: none;
color: #fff;
font-family: "Raleway", "";
text-align: left;
}
.overlay a:hover {
color: #941313;
transition: linear .4s;
}
.further h1 {
color: black;
font-family: "Raleway", "";
font-weight: bold;
font-size: 40px;
padding-top: 75px;
padding-right: 10px;
padding-left: 70px;
}
.further h2 {
color: black;
font-family: "Raleway", "";
font-weight: bold;
font-size: 38px;
padding-right: 80px;
padding-left: 70px;
}
.further {
overflow: hidden;
}
@media screen and (max-width: 640px) {
.about-image {
justify-content: center;
display: inline-block;
}
.further h1 {
padding-top: 200px;
display: inline;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<div class="about-image">
<img class="resist" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=376&q=80" width= "340px"
height= "480px"/>
<div class="overlay">
<a href="about.html">Caption</a>
</div>
</div>
<div class="further">
<h1>
Information written here</h1>
<h2> ⇨ More Information </h2>
<h2> ⇨ More Information</h2>
</div>
提前致谢！
在使网站具有响应性时，您可能还需要考虑其他事项和框架。
1：使用Flexbox
CSS3 Flexible Box，或更广为人知的 Flexbox，是 CSS3 中一种新的强大布局模式。它为我们提供了一个为布局用户界面而优化的盒子模型。使用 Flexbox、垂直居中、相同高度的列、重新排序和改变方向变得轻而易举。
2：使用CSS-Grid
CSS 网格是 CSS 中可用的最强大的布局系统。它为网络带来了一个二维布局工具，能够将项目放置在行和列中。网格在现代网页设计中的重要性很高，因此这个新规范解决了很多在浏览器中布置元素的古老问题。
3：使用媒体查询
媒体查询是 CSS 在 CSS3 中引入的技术。
它使用@media 规则仅在特定条件为真时包含 CSS 属性块。
资源：https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries
4：使用Bootstrap
Bootstrap 是最流行的 HTML、CSS 和 JavaScript 框架，用于开发响应式、移动优先的网站。 Bootstrap 完全免费下载和使用！ Bootstrap 是一个帮助您更快、更轻松地设计网站的框架。它包括基于 HTML 和 CSS 的排版、表单、按钮、表格、导航、模式、图像轮播等设计模板。以下是使用 Bootstrap 的一些其他原因： Bootstrap 的响应式 CSS 适应手机、平板电脑和台式机。
5: 使用基金会
Foundation 也算得上是优秀的前端框架之一。它是一个超响应框架，用于创建无缝设计以创建网站、Web 应用程序和移动应用程序以及电子邮件模板。 Foundation 是最容易学习的框架，因此新用户可以轻松使用它。这个出色的框架有许多组件，包括布局、导航、媒体、库容器等等。 Foundation 还提供了一个特殊的插件列表，为开发人员提供了扩展的选择以相应地选择一个。
提示：做网站时，尽量先做移动端。即首先使网站响应移动视图，然后将其用于桌面。其背后的原因是，如果你首先让它移动，那么它在桌面上看起来也不错。但是如果你先设计桌面，它在移动端看起来就不好看了。
希望对您有所帮助
简介
我看到人们经常建议使用众所周知的框架或库来创建有利于 Vanilla CSS 的响应式设计。对于您的问题，我会说，只需使用默认的 'CSS columns' 机制 MDN: columns。无需为您想要的布局和响应能力包含繁重的代码。
规则
在您的布局中 'CSS columns' 将只需要一个（shorthand 属性）或两个 CSS 规则：
columns, shorthand 属性 为以下两个属性column-count: 2 要么在 body 中设置，要么（像我一样）在通用 .wrapper 中设置。效果：grow/shrink 内容适合可用 space.column-width: 320px 充当 'breakpoint'：列的最小宽度。 320px 是最小移动设备的宽度（假设 'portrait' 布局）减去一些 left/right 间距。不要使用 20rem，因为在这种情况下 column-width 取决于设备，而不是视口、父级 space 或字体大小。效果：当内容不适合（设备的宽度）时，它将换行到下一行并拉伸以填充可用 space.
.wrapper {
/* either */
columns: 320px 2; /* shorthand property */
/* or */
column-count: 2; /* grow/shrink content to fit 2 (maximum allowable) columns */
column-width: 320px;/* but a single column has to fit 320px, otherwise
wrap it to the next line */
}
这将是 'the base rule' 或您页面的主要机制。
[可选] 您可以使用的第二条（或第三条）规则适用于 body（或 .wrapper）的所有直接子元素：
break-inside: avoid, (MDN: break-inside) 这将（尝试）避免在两列中破坏子元素的内容。
我用这个作为
.wrapper>* { break-inside: avoid }/* avoid orphaned content (no splitting over columns) */
异常
现在你需要'anticipate on exceptions'到基本规则，实际决定两种不同的情况：
- 小型设备（移动设备，statcounter）上的布局，我们已经通过分配
column-width: 320px 完成了。大多数常用手机的分辨率为 360x640，因此 column-width: 360px 也可以，但我希望有一些 left/right space 可供用户在手持设备时将手指放在上面。
- 大型设备上的布局（laptop/desktop、statcounter）。可能主要决定内容的大小、位置和间距。
为什么不用 flexbox？
我个人认为深入研究 CSS 'Flexbox Layout' 很有趣，一般来说，解决布局问题是小菜一碟，但是，它需要大量阅读、反复试验。但即使是 FBL 似乎对你的问题也太过分了。
代码
为方便起见，代码段中的代码进行了大量注释，并分为四个不同的部分：
- 首选全局变量，CSS 我在页面中经常使用的规则
- SO62389047 显示机制的具体代码
- 额外，展示了如何使用 linear equation 'y=mx+b' 创建响应式主页间距
- 主题，只是这个和那个让事情看起来不错（阅读 'eye-candy'）
记住就好
再简化再简化(k.i.s.s.s.,'keep it super simple, stupid')，设计规则，预测异常。
片段
/**************************/
/* some preferred globals */
/**************************/
html,body { box-sizing: border-box; width: 100%; max-width: 100% }
*::before,*::after, * { box-sizing: inherit }
/*
'box-sizing: border-box' is the generally accepted (new) default for the box-model.
'border-box' : total-width = element-width + paddingLR + borderLR
total-height = element-height + paddingTB + borderTB
'content-box': total-width = element-width
total-height = element-height
MDN box-sizing: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
*/
body { margin: 0 } /* remove default HTML spacing */
p { margin: 0; padding-bottom: 1em } /* ditto, use padding instead */
a { text-decoration: none; color: currentColor; opacity: 0.8 }
img { /* my default preferred image behaviour */
display: block; /* removes extra space below image (default 'inline-block') */
width: 100%; /* stretch to fit width of parent (or column!) */
object-fit: cover; /* but clip when differs from parent ratio */
}
/****************************/
/* SO62389047 specific code */
/****************************/
/*
Use of a generic wrapper around all the page content makes it easier
to position the content and apply page spacing. Preferably do not modify
<html> and <body> (too much, anyway).
*/
.wrapper {
column-count: 2; /* grow/shrink content to fit 2 columns */
column-width: 320px;/* but a single column has to fit 320px, otherwise
wrap it to the next line */
}
.wrapper>* {
break-inside: avoid;/* avoid orphaned content (no splitting over columns) */
}
.about-image {
position: relative; /* creates a new 'stacking context' (for .overlay) */
}
.about-image .overlay {
position: absolute; /* position within parent (.about-image) */
z-index : 1; /* [OPTIONAL] on top of image */
bottom: 0; /* attach to bottom of parent */
left: 0; right: 0; /* full parent width */
}
.about-image>img {
max-height: 90vh; /* keeps it in full view */
/* full page height (100vh) minus page T/B padding (2 * 5vh) */
}
.further h1 {
font-size: 2vmax; /* make font-size maximum viewport W/H dependend (will keep it large) */
}
.further h2 {
font-size: 1.7vmax; /* ditto */
}
/***********************************************/
/* Extra: using math for responsive page space */
/***********************************************/
.page-spacing {/* arbitrary T/B padding, linear equation for L/R padding */
padding: 5vh calc(19.5vw - 54.4px); /* Y-intercept form */
padding: 5vh calc(8px + (320 - 8) / (1920 - 320) * (100vw - 320px)); /* point slope form */
/*
Use either version, but consider using the first as it is less CPU intensive,
especially important when using many CSS calcs (page can become 'sluggish' on scroll).
*/
/*
THE MATH, 'equation for a straight line'
Calculate L/R padding with linear equation 'y=mx+b'
using points p1(320,8) p2(1920,320) => y=0.195x + 54.4
this means, use L/R padding of:
- 8px on a device with display width 320px
- 320px on a device with display width 1920px
The equation will calculate all other values inbetween. Neat, right?
1) formula: y = m * x + b, the 'Y-intercept form'
where: m = (y2 - y1) / (x2 - x1)
x = always 100vh/vw/vmin/vmax depending on the
viewport W/H dependency of the required end result 'y'.
b = y1 - m * x1 (full: b = y1 - (y2 - y1) / (x2 - x1) * x1 )
p1 = (x1,y1)
p2 = (x2,y2)
2) CSS: calc(0.195 * 100vw + 54.4px)
3) simplify the CSS: calc(19.5vw + 54.4px)
(actually: multiply m by 100 and remove '* 100')
4) Alternatively you can use the 'point slope form' in calc()
equation: y = y1 + (y2 - y1) / (x2 - x1) * (x - x1)
CSS: calc(8px + (320 - 8) / (1920 - 320) * (100vw - 320px))
use of 'px' unit here twice is [MANDATORY] as the calc() will fail otherwise
NOTE
If you want the end result to depend on browser font size settings set by the user
then divide the end result 'y' by 16 and multiply by 1rem
(or multiply by 0.0625rem, which is the same).
math reference: https://www.mathsisfun.com/equation_of_line.html
*/
}
/************************/
/* only eye-candy below */
/************************/
.about-image .overlay {
padding: 0 1rem; /* arbitrary left/right spacing */
line-height: 2rem; /* will make 'overlay' 2rem high, also centers text vertically */
background-color: rgba(0,0,0,.3);
}
.overlay a {
text-decoration: none;
color: #fff;
font-family: "Raleway", "";
}
.overlay a:hover {
color: #941313;
transition: linear .4s;
}
.further {
font-family: "Raleway", sans-serif;
}
/* (put in <body>) for easy debugging: show all elements with outlines */
[outlines="1"] * { outline: 1px dashed }
<body class="page-spacing" outlines="0">
<section class="wrapper">
<div class="further">
<h1>Information written here</h1>
<h2>⇨ More Information</h2>
<h2>⇨ More Information</h2>
</div>
<div class="about-image">
<img class="resist"
src="https://via.placeholder.com/340x480?text=SO62389047"/>
<div class="overlay">
<a rel="noopener" target="_blank" href="about.html">Caption</a>
</div>
</div>
</section>
</body>
我有一个非常简单的代码，旁边只有一些文本和图片（带标题），并且在计算机上运行良好。但是在 phone 上，它根本没有响应。我该如何解决？在较小的屏幕中，图片是在文字上方还是文字旁边都没有关系。
.about-image {
/*position: relative;
display: inline-block; /* Make the width of box same as image */
float: right;
z-index:1;
margin-top: 75px;
margin-bottom: 75px;
margin-right: 30px;
}
.about-image .overlay {
font-family: "Raleway", "";
/*
position: absolute;
*/
bottom: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.8);
font-family: Arial,sans-serif;
color: #fff;
width: 100%; /* Set the width of the positioned div */
height: 5%;
}
.overlay a {
text-decoration: none;
color: #fff;
font-family: "Raleway", "";
text-align: left;
}
.overlay a:hover {
color: #941313;
transition: linear .4s;
}
.further h1 {
color: black;
font-family: "Raleway", "";
font-weight: bold;
font-size: 40px;
padding-top: 75px;
padding-right: 10px;
padding-left: 70px;
}
.further h2 {
color: black;
font-family: "Raleway", "";
font-weight: bold;
font-size: 38px;
padding-right: 80px;
padding-left: 70px;
}
.further {
overflow: hidden;
}
@media screen and (max-width: 640px) {
.about-image {
justify-content: center;
display: inline-block;
}
.further h1 {
padding-top: 200px;
display: inline;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<div class="about-image">
<img class="resist" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=376&q=80" width= "340px"
height= "480px"/>
<div class="overlay">
<a href="about.html">Caption</a>
</div>
</div>
<div class="further">
<h1>
Information written here</h1>
<h2> ⇨ More Information </h2>
<h2> ⇨ More Information</h2>
</div>
提前致谢！
在使网站具有响应性时，您可能还需要考虑其他事项和框架。
1：使用Flexbox
CSS3 Flexible Box，或更广为人知的 Flexbox，是 CSS3 中一种新的强大布局模式。它为我们提供了一个为布局用户界面而优化的盒子模型。使用 Flexbox、垂直居中、相同高度的列、重新排序和改变方向变得轻而易举。
2：使用CSS-Grid
CSS 网格是 CSS 中可用的最强大的布局系统。它为网络带来了一个二维布局工具，能够将项目放置在行和列中。网格在现代网页设计中的重要性很高，因此这个新规范解决了很多在浏览器中布置元素的古老问题。
3：使用媒体查询
媒体查询是 CSS 在 CSS3 中引入的技术。
它使用@media 规则仅在特定条件为真时包含 CSS 属性块。
资源：https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries
4：使用Bootstrap
Bootstrap 是最流行的 HTML、CSS 和 JavaScript 框架，用于开发响应式、移动优先的网站。 Bootstrap 完全免费下载和使用！ Bootstrap 是一个帮助您更快、更轻松地设计网站的框架。它包括基于 HTML 和 CSS 的排版、表单、按钮、表格、导航、模式、图像轮播等设计模板。以下是使用 Bootstrap 的一些其他原因： Bootstrap 的响应式 CSS 适应手机、平板电脑和台式机。
5: 使用基金会
Foundation 也算得上是优秀的前端框架之一。它是一个超响应框架，用于创建无缝设计以创建网站、Web 应用程序和移动应用程序以及电子邮件模板。 Foundation 是最容易学习的框架，因此新用户可以轻松使用它。这个出色的框架有许多组件，包括布局、导航、媒体、库容器等等。 Foundation 还提供了一个特殊的插件列表，为开发人员提供了扩展的选择以相应地选择一个。
提示：做网站时，尽量先做移动端。即首先使网站响应移动视图，然后将其用于桌面。其背后的原因是，如果你首先让它移动，那么它在桌面上看起来也不错。但是如果你先设计桌面，它在移动端看起来就不好看了。
希望对您有所帮助
简介
我看到人们经常建议使用众所周知的框架或库来创建有利于 Vanilla CSS 的响应式设计。对于您的问题，我会说，只需使用默认的 'CSS columns' 机制 MDN: columns。无需为您想要的布局和响应能力包含繁重的代码。
规则
在您的布局中 'CSS columns' 将只需要一个（shorthand 属性）或两个 CSS 规则：
columns, shorthand 属性 为以下两个属性column-count: 2要么在body中设置，要么（像我一样）在通用.wrapper中设置。效果：grow/shrink 内容适合可用 space. 中的 2（最大允许）列
column-width: 320px充当 'breakpoint'：列的最小宽度。 320px 是最小移动设备的宽度（假设 'portrait' 布局）减去一些 left/right 间距。不要使用20rem，因为在这种情况下column-width取决于设备，而不是视口、父级 space 或字体大小。效果：当内容不适合（设备的宽度）时，它将换行到下一行并拉伸以填充可用 space..wrapper { /* either */ columns: 320px 2; /* shorthand property */ /* or */ column-count: 2; /* grow/shrink content to fit 2 (maximum allowable) columns */ column-width: 320px;/* but a single column has to fit 320px, otherwise wrap it to the next line */ }
这将是 'the base rule' 或您页面的主要机制。
[可选] 您可以使用的第二条（或第三条）规则适用于 body（或 .wrapper）的所有直接子元素：
break-inside: avoid, (MDN: break-inside) 这将（尝试）避免在两列中破坏子元素的内容。
我用这个作为
.wrapper>* { break-inside: avoid }/* avoid orphaned content (no splitting over columns) */
异常
现在你需要'anticipate on exceptions'到基本规则，实际决定两种不同的情况：
- 小型设备（移动设备，statcounter）上的布局，我们已经通过分配
column-width: 320px完成了。大多数常用手机的分辨率为 360x640，因此column-width: 360px也可以，但我希望有一些 left/right space 可供用户在手持设备时将手指放在上面。 - 大型设备上的布局（laptop/desktop、statcounter）。可能主要决定内容的大小、位置和间距。
为什么不用 flexbox？
我个人认为深入研究 CSS 'Flexbox Layout' 很有趣，一般来说，解决布局问题是小菜一碟，但是，它需要大量阅读、反复试验。但即使是 FBL 似乎对你的问题也太过分了。
代码
为方便起见，代码段中的代码进行了大量注释，并分为四个不同的部分：
- 首选全局变量，CSS 我在页面中经常使用的规则
- SO62389047 显示机制的具体代码
- 额外，展示了如何使用 linear equation 'y=mx+b' 创建响应式主页间距
- 主题，只是这个和那个让事情看起来不错（阅读 'eye-candy'）
记住就好
再简化再简化(k.i.s.s.s.,'keep it super simple, stupid')，设计规则，预测异常。
片段
/**************************/
/* some preferred globals */
/**************************/
html,body { box-sizing: border-box; width: 100%; max-width: 100% }
*::before,*::after, * { box-sizing: inherit }
/*
'box-sizing: border-box' is the generally accepted (new) default for the box-model.
'border-box' : total-width = element-width + paddingLR + borderLR
total-height = element-height + paddingTB + borderTB
'content-box': total-width = element-width
total-height = element-height
MDN box-sizing: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
*/
body { margin: 0 } /* remove default HTML spacing */
p { margin: 0; padding-bottom: 1em } /* ditto, use padding instead */
a { text-decoration: none; color: currentColor; opacity: 0.8 }
img { /* my default preferred image behaviour */
display: block; /* removes extra space below image (default 'inline-block') */
width: 100%; /* stretch to fit width of parent (or column!) */
object-fit: cover; /* but clip when differs from parent ratio */
}
/****************************/
/* SO62389047 specific code */
/****************************/
/*
Use of a generic wrapper around all the page content makes it easier
to position the content and apply page spacing. Preferably do not modify
<html> and <body> (too much, anyway).
*/
.wrapper {
column-count: 2; /* grow/shrink content to fit 2 columns */
column-width: 320px;/* but a single column has to fit 320px, otherwise
wrap it to the next line */
}
.wrapper>* {
break-inside: avoid;/* avoid orphaned content (no splitting over columns) */
}
.about-image {
position: relative; /* creates a new 'stacking context' (for .overlay) */
}
.about-image .overlay {
position: absolute; /* position within parent (.about-image) */
z-index : 1; /* [OPTIONAL] on top of image */
bottom: 0; /* attach to bottom of parent */
left: 0; right: 0; /* full parent width */
}
.about-image>img {
max-height: 90vh; /* keeps it in full view */
/* full page height (100vh) minus page T/B padding (2 * 5vh) */
}
.further h1 {
font-size: 2vmax; /* make font-size maximum viewport W/H dependend (will keep it large) */
}
.further h2 {
font-size: 1.7vmax; /* ditto */
}
/***********************************************/
/* Extra: using math for responsive page space */
/***********************************************/
.page-spacing {/* arbitrary T/B padding, linear equation for L/R padding */
padding: 5vh calc(19.5vw - 54.4px); /* Y-intercept form */
padding: 5vh calc(8px + (320 - 8) / (1920 - 320) * (100vw - 320px)); /* point slope form */
/*
Use either version, but consider using the first as it is less CPU intensive,
especially important when using many CSS calcs (page can become 'sluggish' on scroll).
*/
/*
THE MATH, 'equation for a straight line'
Calculate L/R padding with linear equation 'y=mx+b'
using points p1(320,8) p2(1920,320) => y=0.195x + 54.4
this means, use L/R padding of:
- 8px on a device with display width 320px
- 320px on a device with display width 1920px
The equation will calculate all other values inbetween. Neat, right?
1) formula: y = m * x + b, the 'Y-intercept form'
where: m = (y2 - y1) / (x2 - x1)
x = always 100vh/vw/vmin/vmax depending on the
viewport W/H dependency of the required end result 'y'.
b = y1 - m * x1 (full: b = y1 - (y2 - y1) / (x2 - x1) * x1 )
p1 = (x1,y1)
p2 = (x2,y2)
2) CSS: calc(0.195 * 100vw + 54.4px)
3) simplify the CSS: calc(19.5vw + 54.4px)
(actually: multiply m by 100 and remove '* 100')
4) Alternatively you can use the 'point slope form' in calc()
equation: y = y1 + (y2 - y1) / (x2 - x1) * (x - x1)
CSS: calc(8px + (320 - 8) / (1920 - 320) * (100vw - 320px))
use of 'px' unit here twice is [MANDATORY] as the calc() will fail otherwise
NOTE
If you want the end result to depend on browser font size settings set by the user
then divide the end result 'y' by 16 and multiply by 1rem
(or multiply by 0.0625rem, which is the same).
math reference: https://www.mathsisfun.com/equation_of_line.html
*/
}
/************************/
/* only eye-candy below */
/************************/
.about-image .overlay {
padding: 0 1rem; /* arbitrary left/right spacing */
line-height: 2rem; /* will make 'overlay' 2rem high, also centers text vertically */
background-color: rgba(0,0,0,.3);
}
.overlay a {
text-decoration: none;
color: #fff;
font-family: "Raleway", "";
}
.overlay a:hover {
color: #941313;
transition: linear .4s;
}
.further {
font-family: "Raleway", sans-serif;
}
/* (put in <body>) for easy debugging: show all elements with outlines */
[outlines="1"] * { outline: 1px dashed }
<body class="page-spacing" outlines="0">
<section class="wrapper">
<div class="further">
<h1>Information written here</h1>
<h2>⇨ More Information</h2>
<h2>⇨ More Information</h2>
</div>
<div class="about-image">
<img class="resist"
src="https://via.placeholder.com/340x480?text=SO62389047"/>
<div class="overlay">
<a rel="noopener" target="_blank" href="about.html">Caption</a>
</div>
</div>
</section>
</body>