运用HTML和CSS的新特性实现相应式布局
除了使用媒体查询和现代CSS规划(如flexbox和grid)来创立响应式网站外,我们还可以做好某些被无视的事情来制作响应式网站。在本文中,我们将商量很多可用的工具(环绕HTML和CSS),从响应图像到相对较新的CSS函数,不管我们可否使用媒体查询,它们都可以正常工作。
事实上,媒体查询与这些功效一起使用时,更多的是成为一种补充,而不是完全的办法。让我们来看看是怎样运作的。
真正的响应式图像
还记得当我们可以在图片上写死 width: 100%
,然后就可以下班了吗?当然,这样做还是有结果的,也确实能让图片变得更有弹性,但也会带来一些弊端,其中最明显的包罗:
- 图像大概会变形到失去焦点的程度。
- 较小的设备仍会下载完全尺寸的图像。
在网络上使用图像时,我们必需确保在辨论率和尺寸方面停止了优化。缘由是为了确保我们有适宜的图像辨论率以顺应适宜的设备,所以我们不会终究为较小的屏幕下载非常大和繁重的图像,这大概会落低网站的机能。
简便来说,我们要确保较大的、高辨论率的图像被发送到大屏幕上,而较小的、低辨论率的转变被发送到小屏幕上,从而提高机能和会员体验。
HTML供给了 <picture>
元素,该元素使我们可以按照所增加的媒体查询来指定要显现确实切图像资源。如前所述,我们没有将一个图像(平常是一个大的、高辨论率的版本)发送到所有屏幕大小并将其缩放到视口宽度,而是指定一组用于特定状况的图像。
<picture> <source media="(max-width:1000px)" srcset="picture-lg.png"> <source media="(max-width:600px)" srcset="picture-mid.png"> <source media="(max-width:400px)" srcset="picture-sm.png"> <img src="picture.png" alt="picture""> </picture>
在此示例中,picture.png
是全尺寸图像。从那里,我们定义了图片的下一个最大版本,picture-lg.png
,大小顺次减少,直到最小的版本 picture-sm.png
。请留意,我们在这种办法中依然使用媒体查询,但驱动响应行动的是 <picture>
元素本身,而不是在CSS中定义断点。
媒体查询已恰当增加,以随图片大小缩放:
- 大于等于1000px的视口将获得
picture.png
。 - 介于601像素和999像素之间的视口将获得
picture-lg.png
。 - 介于401像素和600像素之间的视口将获得
picture-sm.png
。 - 任何小于400px的东西都会得到
picture-sm.png
。
有味的是,我们还可以在URL后按图像密度给每张图片贴上标签——1x、2x、3x等等。假如我们把不一样的图片按比例制作好了就可以了,这样阅读器就可以按照屏幕的像素密度乃至视口大小来决议下载哪个版本。但是请留意,我们终究定义了多少个图像:
<picture> <source media="(max-width:1000px)" srcset="picture-lg_1x.png 1x, picture-lg_2x.png 2x, picture-lg_3x.png 3x"> <source media="(max-width:600px)" srcset="picture-mid_1x.png 1x, picture-mid_2x.png 2x, picture-mid_3x.png 3x"> <source media="(max-width:400px)" srcset="picture-small_1x.png 1x, picture-small_2x.png 2x, picture-small_1x.png 3x"> <img src="picture.png" alt="picture""> </picture>
让我们专门看一下嵌套在 <picture>
元素内的两个标签:<source>
和 <img>
。
阅读器将查寻媒体查询与当前视口宽度匹配的第一个 <source>
元素,然后将显示准确的图像(在 srcset
属性中指定)。<img>
元素是 <picture>
元素的最后一个子元素,假如没有原始源标签匹配,则作为后备选项。
我们还可以使用图像密度通过 srcset
属性仅使用 <img>
元从来处置响应图像:
<img srcset=" flower4x.png 4x, flower3x.png 3x, flower2x.png 2x, flower1x.png 1x " src="flower-fallback.jpg" >
我们可以做的另一件事是在CSS中按照设备本身的屏幕辨论率(平常以dots per inch或dpi为单位)而不仅仅是设备视口来编写媒体查询。这意味着,代替:
@media only screen and (max-width: 600px) { /* Style stuff */ }
我们此刻有:
@media only screen and (min-resolution: 192dpi) { /* Style stuff */ }
这种办法让我们可以按照设备本身的屏幕辨论率来决议渲染什么图像,这在处置高辨论率图像时大概会有帮忙。根本上,这意味着我们可认为支撑更高辨论率的屏幕显示高质量的图片,并以较低的辨论率显示较小的版本。值得留意的是,虽然移动设备的屏幕很小,但它们的辨论率平常很高。这意味着在决议渲染哪张图片时,仅仅依托辨论率大概不是最好的主意。这大概致使在非常小的屏幕上显示大的、高辨论率的图像,这大概不是我们真正想要在如此小的屏幕上显示的版本。
body { background-image : picture-md.png; /* the default image */ } @media only screen and (min-resolution: 192dpi) { body { background-image : picture-lg.png; /* higher resolution */ } }
<picture>
给我们供给的根本上是对图像停止艺术引导的能力。并且,按照这个设法,我们可以利用CSS的特性,比方 object-fit
属性,当与 object-position
一起使用时,我们可以裁剪图像以获得更好的焦点,同时保持图像的纵横比。
因此,要更换图像的焦点:
@media only screen and (min-resolution: 192dpi) { body { background-image : picture-lg.png; object-fit: cover; object-position: 100% 150%; /* moves focus toward the middle-right */ } }
在CSS中设定minimum和maximum
min()
函数指定一个元素可以缩小到的绝对最小尺寸。这个函数在帮忙文本大小在不一样屏幕大小之间恰当缩放方面非常有用,比方永久不要让流体类型下落到一个清楚的字体大小以下:
html { font-size: min(1rem, 22px); /* Stays between 16px and 22px */ }
min()
接受两个值,它们可以是相对、百分比或牢固单位。在这个例子中,我们告诉阅读器永久不要让带有 .box
类的元素宽度低于45%或600px,以视口宽度最小的为准。
.box { width : min(45%, 600px) }
假如45%运算得出的值小于600px,则阅读器将使用45%作为宽度。反之,假如45%的运算值大于600px,那么元素的宽度将使用600px。
max()
函数也是一样的事理,它也接受两个值,但不是指定一个元素的最小尺寸,而是定义它的最大尺寸。
.box { width : max(60%, 600px) }
假如60%运算出的数值大于600px,阅读器就会使用60%作为宽度。反过来说,假如60%的运算值小于600px,那么将使用600px作为元素的宽度。
钳制(Clamping)值
我们中的很多人已经为clip()叫嚣了一段时间,实际上我们在所有现代阅读器中都得到了广泛的支撑(对不起,IE)。 clamp()
是 min()
和 max()
函数的组合,接受三个参数:
最小值
首选值,乃至
最大值
例如:
.box { font-size : clamp(1rem, 40px, 4rem) }
阅读器会将字体设定为1rem,直到1rem的运算值大于40px。而当运算值大于40px时?是的,阅读器在到达4rem后将休止增添大小。你可以看到怎样使用 clip()
来使元素变得流畅,而无需使用媒体查询。
与响应单位合作
你可否曾经创立过一个大标题或小标题的页面,并恋慕它在桌面屏幕上看起来有多好,但在移动设备上检查时却发明它太大了?我必定会碰到这种状况,在本节中,我将说明怎样处置此类问题。
在CSS中,你可以使用各种度量单位来肯定元素的大小或长度,最常用的度量单位包罗:px
,em
,rem
,%
,vw
和 vh
。虽然,还有一些不常用的单位。我们感乐趣的是,px
可以认为是一个绝对单位,而其余的则认为是相对单位。
绝对单位
像素(px
)被视为绝对单位,主如果由于像素是牢固的,并且不会因其他任何元素的测量而转变。可以将其视为其他一些相对单位使用的根本单位或根单位。试图使用像从来停止响应行动大概会碰到问题,由于它是牢固的,但假如你有一些基本不该该调整大小的元素,它们是很好的。
相对单位
相对单位,如 %
、em
和 rem
,更适合响应式设计,主如果由于它们能够跨过不一样的屏幕尺寸停止缩放。
- vw:相关于视口的宽度
- vh:相关于视口的高度
- rem:相关于根(
<html>
)元素(默许字体大小平常为16px) - em:相关于父元素
- %:相关于父元素
一样,大多数阅读器的默许字体大小是 16px
,rem
单位使用它来生成运算值。所以,假如会员在阅读器上调整字体大小,页面上的所有内容都会按照根部大小准确缩放。例如,当处置一个根为 16px
时,你指定的数字将乘以该数字乘以默许大小。例如:
.8rem = 12.8px (.8 * 16) 1rem = 16px (1 * 16) 2rem = 32px (2 * 16)
假如你或会员更换默许大小如何办?我们已经说过,这些都是相对单位,终究的尺寸值将以新的根本尺寸为根基。这在媒体查询中很有用,你只需改动字体大小,整个页面就会响应地放大或缩小。
例如,假如你在CSS中把字体大小改为10px,那么运算出来的大小就会变成。
html { font-size : 10px; }
1rem = 10px (1 * 10) 2rem = 20px (2 * 10) .5rem = 5px (.5 * 10)
留意:这也适用于百分比 %
。例如:
100% = 16px; 200% = 32px; 50% = 8px;
rem
和 em
单位有什么不同? rem
使用根元素(<html>
)的字体大小来运算值,而声明 em
值的元素则援用包括它的父元素的字体大小。假如指定的父元素和根元素的大小不一样(例如父元素是18px,但根元素是16px),那么em和rem将解析为不一样的运算值。这让我们可以更精密地操纵我们的元素在不一样的响应环境中的响应方式。
vh
是视口高度的首字母缩写,也就是可视屏幕的高度,100vh代表视口高度的100%(取决于设备)。同理,vw
代表视口宽度,意为设备的可视屏幕宽度,100vw字面意思是代表100%的视口宽度。
超过媒体查询
看到了吗?我们刚刚看了一些非常强大且相对较新的 HTML 和 CSS 功效,它们为我们供给了额外的(大概更有效的)构建响应性的办法。这并不是说这些新技术代替了我们不断在做的事情。它们只是我们开发者工具带中的更多工具,让我们有更大的操纵权来决议元素在不一样上下文中的行动。不管是对字体大小、辨论率、宽度、焦点,还是任何事物的处置,我们对会员体验的操纵都比以往愈加精密。
所以,下次当你发明本人在一个项目上工作时,你但愿在特定设备上对设计确实切外不雅和感受有更多的操纵,看看原生HTML和CSS能帮上什么忙——事情已经开展到令人难以置信的地步了。
原文地址:https://css-tricks.com/beyond-media-queries-using-newer-html-css-features-for-responsive-designs/