乐趣区

关于前端:超越媒体查询使用更新的HTML和CSS功能进行响应式设计

jiezi

除了应用媒体查问和古代 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() 函数的组合，承受三个参数：

  1. 最小值
  2. 首选值，以及
  3. 最大值

例如：

.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 能帮上什么忙——事件曾经倒退到令人难以置信的境地了。

关注这个脱发、摆摊、卖货、继续学习的程序员，第一工夫浏览最新文章，会优先两天发表新文章。关注即可支付大礼包，准能为你节俭不少钱！

退出移动版