HTML 및 CSS의 새로운 기능을 사용하여 반응형 레이아웃 구현

반응형 웹 사이트를 만들기 위해 미디어 쿼리와 Flexbox 및 그리드와 같은 최신 CSS 레이아웃을 사용하는 것 외에도 반응형 웹 사이트를 만들기 위해 우리가 할 수 있는 몇 가지 간과된 작업이 있습니다. 이 기사에서는 반응형 이미지부터 미디어 쿼리 사용 여부에 관계없이 작동하는 비교적 새로운 CSS 기능에 이르기까지 사용 가능한 다양한 도구(HTML 및 CSS 관련)를 살펴보겠습니다.

사실 미디어 쿼리를 이러한 기능과 함께 사용하면 완전한 접근 방식이라기보다는 보완적인 접근 방식이 더 많아집니다. 그것이 어떻게 작동하는지 봅시다.

진정한 반응형 이미지

이미지에 width: 100%를 하드코딩하고 그걸로 끝낼 수 있었던 때를 기억하시나요? 물론 이는 여전히 효과적이며 이미지를 더 유연하게 만들지만 몇 가지 단점도 가져옵니다. 그 중 가장 명백한 것은 다음과 같습니다. width: 100% ，然后就可以下班了吗？当然，这样做还是有效果的，也确实能让图片变得更有弹性，但也会带来一些弊端，其中最明显的包括：

• 图像可能会变形到失去焦点的程度。
• 较小的设备仍会下载完整尺寸的图像。

在网络上使用图像时，我们必须确保在分辨率和尺寸方面进行了优化。原因是为了确保我们有合适的图像分辨率以适应合适的设备，所以我们不会最终为较小的屏幕下载非常大和沉重的图像，这可能会降低网站的性能。

简单来说，我们要确保较大的、高分辨率的图像被发送到大屏幕上，而较小的、低分辨率的变化被发送到小屏幕上，从而提高性能和用户体验。

HTML提供了 <picture></picture> 元素，该元素使我们可以根据所添加的媒体查询来指定要呈现的确切图像资源。如前所述，我们没有将一个图像(通常是一个大的、高分辨率的版本)发送到所有屏幕大小并将其缩放到视口宽度，而是指定一组用于特定情况的图像。

<picture>
  <source>
  <source>
  <source>
  <img  src="/static/imghw/default1.png" data-src="picture.png" class="lazy" alt="HTML 및 CSS의 새로운 기능을 사용하여 반응형 레이아웃 구현" >
</source></source></source></picture>

在此示例中，picture.png 是全尺寸图像。从那里，我们定义了图片的下一个最大版本，picture-lg.png，大小依次减少，直到最小的版本 picture-sm.png。请注意，我们在这种方法中仍然使用媒体查询，但驱动响应行为的是 <picture></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>
  <source>
  <source>
  <img  src="/static/imghw/default1.png" data-src="picture.png" class="lazy" alt="HTML 및 CSS의 새로운 기능을 사용하여 반응형 레이아웃 구현" >
</source></source></source></picture>

让我们专门看一下嵌套在 <picture></picture> 元素内的两个标签：<source></source> 和 <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/870/465/873/1606211132104709.jpg" class="lazy" alt="HTML 및 CSS의 새로운 기능을 사용하여 반응형 레이아웃 구현" >。

浏览器将查找媒体查询与当前视口宽度匹配的第一个 <source></source> 元素，然后将显示正确的图像（在 srcset 属性中指定）。<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/870/465/873/1606211132104709.jpg" class="lazy" alt="HTML 및 CSS의 새로운 기능을 사용하여 반응형 레이아웃 구현" > 元素是 <picture></picture> 元素的最后一个子元素，如果没有原始源标签匹配，则作为后备选项。

我们还可以使用图像密度通过 srcset 属性仅使用 <img src="/static/imghw/default1.png" data-src="flower-fallback.jpg" class="lazy" alt="HTML 및 CSS의 새로운 기능을 사용하여 반응형 레이아웃 구현" >

• 이미지가 초점을 잃을 정도로 변형될 수 있습니다.
• 소형 장치에서는 여전히 전체 크기 이미지를 다운로드합니다.

웹에서 이미지를 사용할 때는 해상도와 크기 측면에서 최적화되어 있는지 확인해야 합니다. 그 이유는 올바른 장치에 적합한 이미지 해상도를 확보하여 사이트 성능을 저하시킬 수 있는 작은 화면에 매우 크고 무거운 이미지를 다운로드하지 않기 위해서입니다.

간단히 말해서, 우리는 더 큰 고해상도 이미지가 큰 화면으로 전송되고, 더 작은 저해상도 변경 사항이 작은 화면으로 전송되어 성능과 사용자 경험이 향상되기를 원합니다.

HTML은 추가된 미디어 쿼리를 기반으로 렌더링할 정확한 이미지 리소스를 지정할 수 있는 <picture></picture> 요소를 제공합니다. 앞에서 언급했듯이 하나의 이미지(일반적으로 큰 고해상도 버전)를 모든 화면 크기에 전송하고 뷰포트 너비에 맞게 크기를 조정하는 대신 특정 상황에 사용되는 이미지 세트를 지정합니다.

<img  src="/static/imghw/default1.png" data-src="flower-fallback.jpg" class="lazy" alt="HTML 및 CSS의 새로운 기능을 사용하여 반응형 레이아웃 구현" >

이 예에서 picture.png는 전체 크기 이미지입니다. 여기에서 가장 작은 버전인 picture-sm.png까지 계속해서 작은 크기로 그림의 다음으로 큰 버전인 picture-lg.png를 정의합니다. 이 접근 방식에서는 여전히 미디어 쿼리를 사용하고 있지만 CSS에서 중단점을 정의하는 것이 아니라 응답 동작을 구동하는 것은 <picture></picture> 요소 자체입니다. 🎜🎜미디어 쿼리가 이미지 크기에 맞게 적절하게 추가되었습니다. 🎜

• 1000px 이상의 뷰포트는 picture.png를 가져옵니다.
• 601픽셀에서 999픽셀 사이의 뷰포트는 picture-lg.png를 얻습니다.
• 401픽셀에서 600픽셀 사이의 뷰포트는 picture-sm.png를 얻습니다.
• 400px보다 작은 것은 picture-sm.png를 얻습니다.

🎜흥미롭게도 URL 뒤의 이미지 밀도(1x, 2x, 3x 등)에 따라 각 이미지에 레이블을 지정할 수도 있습니다. 브라우저가 화면의 픽셀 밀도와 뷰포트 크기에 따라 다운로드할 버전을 결정할 수 있도록 다양한 이미지의 비율을 조정하면 괜찮을 것입니다. 하지만 우리가 정의한 이미지 수는 다음과 같습니다. 🎜

@media only screen and (max-width: 600px) {
  /* Style stuff */
}

🎜 <picture></picture> 요소 내에 중첩된 두 태그인 code> 및 <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/870/465/873/1606211132104709.jpg" class="lazy" alt="HTML 및 CSS의 새로운 기능을 사용하여 반응형 레이아웃 구현" >. 🎜🎜브라우저는 미디어 쿼리가 현재 뷰포트 너비와 일치하는 첫 번째 <source></source> 요소를 찾고 올바른 이미지를 표시합니다( srcset 속성에 지정됨). . <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/870/465/873/1606211132104709.jpg" class="lazy" alt="HTML 및 CSS의 새로운 기능을 사용하여 반응형 레이아웃 구현" > 요소는 <picture></picture> 요소의 마지막 하위 요소이며 일치하는 원본 소스 태그가 없는 경우 대체 역할을 합니다. 🎜🎜🎜🎜us <img alt="HTML 및 CSS의 새로운 기능을 사용하여 반응형 레이아웃 구현" > 요소만으로 반응형 이미지를 처리하기 위해 srcset 속성을 ​​통해 이미지 밀도를 사용할 수도 있습니다. 🎜

@media only screen and (min-resolution: 192dpi) {
  /* Style stuff */
}

🎜 우리가 할 수 있는 또 다른 작업은 Write 장치 뷰포트뿐만 아니라 장치 자체의 화면 해상도(일반적으로 인치당 도트 수 또는 dpi)를 기반으로 하는 미디어 쿼리입니다. 즉, 🎜

body {
  background-image : picture-md.png; /* the default image */
}

@media only screen and (min-resolution: 192dpi) {
  body {
    background-image : picture-lg.png; /* higher resolution */
  }
}

🎜 대신 다음이 있습니다. 🎜

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

🎜 이 접근 방식을 사용하면 장치 자체의 화면 해상도를 기반으로 렌더링할 이미지를 결정할 수 있으며 이는 고해상도 이미지 작업에 도움이 될 수 있습니다. 기본적으로 이는 더 높은 해상도를 지원하는 화면에 대해 고품질 이미지를 표시하고 더 낮은 해상도에서는 더 작은 버전을 표시할 수 있음을 의미합니다. 모바일 장치 화면은 작지만 일반적으로 해상도가 매우 높다는 점은 주목할 가치가 있습니다. 이는 렌더링할 이미지를 결정할 때 해상도에만 의존하는 것이 최선의 방법이 아닐 수 있음을 의미합니다. 이로 인해 매우 작은 화면에 큰 고해상도 이미지가 표시될 수 있으며, 이는 우리가 실제로 그러한 작은 화면에 표시하려는 버전이 아닐 수도 있습니다. 🎜

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></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：相对于根（）元素（默认字体大小通常为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 使用根元素()的字体大小来计算值，而声明 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/

更多编程相关知识，请访问：编程视频课程！！

위 내용은 HTML 및 CSS의 새로운 기능을 사용하여 반응형 레이아웃 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!