반응형 웹 사이트를 만들기 위해 미디어 쿼리와 Flexbox 및 그리드와 같은 최신 CSS 레이아웃을 사용하는 것 외에도 반응형 웹 사이트를 만들기 위해 우리가 할 수 있는 몇 가지 간과된 작업이 있습니다. 이 기사에서는 반응형 이미지부터 미디어 쿼리 사용 여부에 관계없이 작동하는 비교적 새로운 CSS 기능에 이르기까지 사용 가능한 다양한 도구(HTML 및 CSS 관련)를 살펴보겠습니다.
사실 미디어 쿼리를 이러한 기능과 함께 사용하면 완전한 접근 방식이라기보다는 보완적인 접근 방식이 더 많아집니다. 그것이 어떻게 작동하는지 봅시다.
진정한 반응형 이미지
이미지에 width: 100%를 하드코딩하고 그걸로 끝낼 수 있었던 때를 기억하시나요? 물론 이는 여전히 효과적이며 이미지를 더 유연하게 만들지만 몇 가지 단점도 가져옵니다. 그 중 가장 명백한 것은 다음과 같습니다. width: 100% ,然后就可以下班了吗?当然,这样做还是有效果的,也确实能让图片变得更有弹性,但也会带来一些弊端,其中最明显的包括:
<picture>
<source>
<source>
<source>
<img alt="HTML 및 CSS의 새로운 기능을 사용하여 반응형 레이아웃 구현" >
</source></source></source></picture>
로그인 후 복사
로그인 후 복사
让我们专门看一下嵌套在 <picture></picture> 元素内的两个标签:<source></source> 和 <img alt="HTML 및 CSS의 새로운 기능을 사용하여 반응형 레이아웃 구현" >。
浏览器将查找媒体查询与当前视口宽度匹配的第一个 <source></source> 元素,然后将显示正确的图像(在 srcset 属性中指定)。<img alt="HTML 및 CSS의 새로운 기능을 사용하여 반응형 레이아웃 구현" > 元素是 <picture></picture> 元素的最后一个子元素,如果没有原始源标签匹配,则作为后备选项。
我们还可以使用图像密度通过 srcset 属性仅使用 <img alt="HTML 및 CSS의 새로운 기능을 사용하여 반응형 레이아웃 구현" >
이미지가 초점을 잃을 정도로 변형될 수 있습니다.
소형 장치에서는 여전히 전체 크기 이미지를 다운로드합니다.
웹에서 이미지를 사용할 때는 해상도와 크기 측면에서 최적화되어 있는지 확인해야 합니다. 그 이유는 올바른 장치에 적합한 이미지 해상도를 확보하여 사이트 성능을 저하시킬 수 있는 작은 화면에 매우 크고 무거운 이미지를 다운로드하지 않기 위해서입니다. 간단히 말해서, 우리는 더 큰 고해상도 이미지가 큰 화면으로 전송되고, 더 작은 저해상도 변경 사항이 작은 화면으로 전송되어 성능과 사용자 경험이 향상되기를 원합니다. HTML은 추가된 미디어 쿼리를 기반으로 렌더링할 정확한 이미지 리소스를 지정할 수 있는 <picture></picture> 요소를 제공합니다. 앞에서 언급했듯이 하나의 이미지(일반적으로 큰 고해상도 버전)를 모든 화면 크기에 전송하고 뷰포트 너비에 맞게 크기를 조정하는 대신 특정 상황에 사용되는 이미지 세트를 지정합니다.
<img 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> 요소 내에 중첩된 두 태그인
위 내용은 HTML 및 CSS의 새로운 기능을 사용하여 반응형 레이아웃 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!