미디어 쿼리 너머 : 응답 디자인에 새로운 HTML 및 CSS 기능 사용

반응 형 웹 디자인은 미디어 쿼리 및 Flexbox 및 Grid와 같은 최신 CSS 레이아웃을 넘어선 것입니다. 이 기사는 종종 반응이 좋은 웹 사이트를 만들기위한 자주 사용되는 HTML 및 CSS 기술을 탐구하여보다 자연스럽고 효율적인 접근 방식을 위해 미디어 쿼리에 대한 의존을 최소화합니다.

이러한 고급 기능과 함께 사용될 때 미디어 쿼리가 보충됩니다. 방법을 탐구합시다.

진정한 반응 형 이미지 : width: 100%

width: 100% 이미지 크기 조정을 단순화하면 단점이 있습니다 : 이미지 왜곡 및 소규모 장치에서 불필요한 대규모 다운로드. 이미지 해상도 및 크기를 최적화하는 것은 성능에 중요합니다. 고해상도 이미지는 더 큰 화면으로 제공되어야하며 소규모 버전으로 제공되어야합니다.

그만큼<picture></picture> 요소는 미디어 쿼리를 기반으로 정확한 이미지 리소스 선택을 제공합니다. 단일 큰 이미지를 확장하는 대신 다른 시나리오에 대한 여러 이미지 버전을 지정합니다.

<picture>
  <source media="(min-width: 1000px)" srcset="picture.png">
  <source media="(min-width: 601px)" srcset="picture-lg.png">
  <source media="(min-width: 401px)" srcset="picture-sm.png">
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174358939320557.png?x-oss-process=image/resize,p_40" class="lazy" alt="미디어 쿼리 너머 : 응답 디자인에 새로운 HTML 및 CSS 기능 사용">
</source></source></source></picture>

이 예제는 picture-sm.png 폴백으로 사용합니다. 미디어 쿼리는 특정 뷰포트 너비를 대상으로 적절한 이미지를 선택합니다. 또한 추가 최적화를 위해 이미지 밀도 (1x, 2x, 3x)를 srcset 속성에 통합 할 수 있습니다.

그만큼 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174358939433455.png?x-oss-process=image/resize,p_40" class="lazy" alt="미디어 쿼리 너머 : 응답 디자인에 새로운 HTML 및 CSS 기능 사용"> <h3 id="Device-Resolution-Based-Styling-with-CSS-Media-Queries">Device Resolution-Based Styling with CSS Media Queries</h3> CSS 미디어 쿼리는 뷰포트 크기가 아닌 화면 해상도 (DPI)를 대상으로 할 수 있습니다.

 @Media 전용 화면 및 (Min-Resolution : 192dpi) {
  / * 고해상도 스크린 스타일 */
}

이를 통해 고품질 이미지를 고해상도 화면에 제공 할 수 있습니다. 그러나 해상도에만 의존하면 작은 화면에 큰 이미지를 제공 할 수 있으므로 뷰포트 크기 점검과 결합하는 것이 좋습니다.

예:

 몸 {
  배경 이미지 : URL (Picture-Md.png); / * 기본 이미지 */
}

@Media 전용 화면 및 (Min-Resolution : 192dpi) {
  몸 {
    배경 이미지 : URL (picture-lg.png); / * 고해상도 이미지 */
    객체 적합 : 덮개;
    객체 위치 : 100% 150%; / * 초점 조정 */
  }
}

object-fit 및 object-position 특성은 이미지 자르기 및 초점에 대한 세밀한 제어를 제공합니다.

CSS 함수 : min() , max() 및 clamp()

• min() : 요소의 최소 크기를 설정합니다. 텍스트가 눈에 띄지 않도록하는 데 유용합니다.

   html {
    글꼴 크기 : Min (1REM, 22px); / * 16px에서 22px 사이의 글꼴 크기 */
  }

• max() : 요소의 최대 크기를 설정합니다.

   .상자 {
    너비 : 최대 (60%, 600px); / * 폭은 최대 60% 또는 600px */
  }

• clamp() : 최소, 선호 및 최대 값을 제공하는 min() 및 max() 결합합니다.

   .상자 {
    글꼴 크기 : 클램프 (1REM, 40px, 4REM); / * 범위 내의 글꼴 크기 */
  }

반응 형 장치 : 픽셀 너머

반응 형 디자인은 상대 단위의 이점 :

• vw / vh : 뷰포트 너비 / 높이.
• rem : 루트 요소의 글꼴 크기와 관련이 있습니다.
• em : 부모 요소의 글꼴 크기와 관련이 있습니다.
• % : 부모 요소의 크기와 관련이 있습니다.

rem 글꼴 크기가 변경된 상태에서 일관된 스케일링을 제공합니다. em 유닛은 부모 요소 크기에 따라보다 세분화 된 제어를 제공합니다. vw 와 vh 뷰포트 차원과 직접 연결되어 있습니다.

미디어 쿼리 너머로 이동 : 전체적인 접근

이러한 HTML 및 CSS 기능은 미디어 쿼리를 대체하기보다는 보완하는 응답성에 대한 제어력 향상을 제공합니다. 그들은 다양한 장치와 스크린 크기에 걸쳐 사용자 경험을 더 세밀하게 제어 할 수 있습니다. 이러한 기술을 활용하여 개발자는보다 강력하고 효율적인 대응 디자인을 만들 수 있습니다.

위 내용은 미디어 쿼리 너머 : 응답 디자인에 새로운 HTML 및 CSS 기능 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!