关于css3:超越媒体查询使用更新的特性进行响应式设计

作者：David Atanda
译者：前端小智
起源：CSS-Tricket

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

除了应用媒体查问和古代 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
601px到 999px 之间的视口加载image-lg.png
介于 401px 和600px之间的视口加载picture-mid.png
小于 400px 的会加载image-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> 元素的最初一个子元素是必须的，如果没有一个 source 标签与之匹配，则作为一个回退选项。

咱们还能够应用 srcset 属性应用图像密度来解决仅应用 <img> 元素来解决响应图像：

<img
 srcset="
  flower4x.png 4x,
  flower3x.png 3x,
  flower2x.png 2x,
  flower1x.png 1x
 "src="flower-fallback.jpg"
>

咱们能够做的另一件事是依据设施自身的屏幕分辨率 (通常以每英寸的点或 dpi 来掂量) 在 CSS 中编写媒体查问，而不仅仅是设施视口。这意味着不是上面这种写法

@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 */
  }
}

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 作为元素的宽度

clamp() 函数的作用是把一个值限度在一个下限和上限之间，当这个值超过最小值和最大值的范畴时，在最小值和最大值之间抉择一个值应用。它接管三个参数：最小值、首选值、最大值。clamp() 被用在 <length>、<frequency>、<angle>、<time>、<percentage>、<number>、<integer> 中都是被容许的。

clamp(MIN, VAL, MAX) 其实就是示意 max(MIN, min(VAL, MAX))，例如：

.box {font-size : clamp(1rem, 40px, 4rem)
}

浏览器会将字体设置为 1rem，直到1rem 的计算值大于 40px。而当计算值大于40px 时？是的，浏览器在达到 4rem 后将进行减少大小。

你是否已经建设过一个带有大题目或副标题的页面，并且在 PC 屏幕上的显示成果良好，但在挪动设施上却发现它太大了？我猜必定会遇到这种状况，在本节中，咱们将介绍如何解决此类问题。

在 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 中将 font-size 更改为10px，则计算出的尺寸最终将是：

html {font-size : 10px;}

1rem = 10px (1 * 10)
2rem = 20px (2 * 10)
.5rem = 5px (.5 * 10)

留神: 这也实用于百分比1%, 例如

100% = 16px;
200% = 32px; 
50% = 8px;

rem和 em 单位有什么区别？

rem应用根（<html>）元素的字体大小计算值，而申明 em 值的元素援用蕴含它的父元素的字体大小。如果指定的父元素的大小与根元素的大小不同（例如，父元素为 18px，但根元素为16px），则em 和rem将解析为不同的计算值。这使咱们能够更细粒度地管制元素在不同响应上下文中的响应形式。

vh是视口高度或可见屏幕高度的首字母缩写。100vh代表视口高度的 100%（取决于设施）。同样，vw 代表视口宽度，这意味着设施的可视屏幕宽度，而 100vw 则代表视口宽度的100%。

以上，咱们只钻研了许多真正弱小且绝对较新的 HTML 和 CSS 性能，这些性能为咱们提供了更多（可能更无效）的响应形式构建办法。这些新的货色并不是取代咱们始终以来所做的事件。它们只是为开发人员带来更多的可选性，可让咱们更好地管制确定元素在不同上下文中的行为。无论是应用字体大小，分辨率，宽度，焦点还是其余任何货色，咱们对用户体验的管制都比以往任何时候都要精密。

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://css-tricks.com/beyond…

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588… 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

关于css3:超越媒体查询使用更新的特性进行响应式设计

真正的响应图像

在 CSS 中设置最小值和最大值

限定值

应用响应单位

相对单位

绝对单位

超过媒体查问

交换

Just My Socks（注册教程内含优惠码）

关于css3:超越媒体查询使用更新的特性进行响应式设计

真正的响应图像

在 CSS 中设置最小值和最大值

限定值

应用响应单位

相对单位

绝对单位

超过媒体查问

交换

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）