반응형 디자인이라 불리는 것은 화면 해상도, 픽셀 밀도 비율, 너비가 서로 다른 단말 장치에서 웹 페이지 레이아웃을 적응적으로 조정할 수 있음을 의미합니다. 반응형 디자인의 원래 의도는 원래의 PC 웹사이트를 모바일 단말기와 호환되게 만드는 것입니다. 대부분의 반응형 웹페이지는 미디어 쿼리와 다양한 스타일의 CSS 파일 로딩을 통해 구현됩니다. 이러한 종류의 유연한 레이아웃은 다양한 장치 터미널에서 웹사이트의 레이아웃을 더욱 합리적으로 만듭니다. 이번 글에서는 주로 HTML5의 그림 요소의 반응형 이미지 처리에 대한 자세한 설명을 소개하고 있는데, 편집자 입장에서는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려드리겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.
반응형 디자인에는 많은 이점이 있지만 단점도 많습니다. PC와 모바일 단말이 동일한 웹사이트에 접속하기 때문에 PC는 트래픽 제한을 신경 쓸 필요가 없지만 모바일 단말은 이를 무시할 수 없다.
다양한 단말기 모델의 화면 너비와 픽셀 밀도에 적응하기 위해 일반적으로 다음 방법을 사용하여 이미지의 CSS 스타일을 설정합니다.
이미지의 최대 너비를 100%로 설정합니다. 이미지가 상위 요소의 너비를 초과하지 않는지 확인하세요. 상위 요소의 너비가 변경되면 이미지의 너비도 변경됩니다. height: auto는 이미지의 너비가 변경되면 높이도 변경되도록 합니다. 이미지는 자체 너비 대 높이 비율에 따라 크기가 조정됩니다.
이렇게 하면 모바일 기기에서 반응형 웹페이지의 이미지에 접근할 때 이미지의 해상도만 조정하고, 큰 이미지를 PC에 다운로드하게 되는데, 이는 트래픽을 낭비할 뿐만 아니라 대역폭도 낭비하게 됩니다. 웹페이지 열기 속도는 사용자 경험에 심각한 영향을 미칩니다.
새로운 솔루션:
는 HTML5의 새로운 요소입니다.
요소가 현재
다음 밤은 다양한 화면 너비에 대한 다른 이미지를 로드합니다. minpic.png는 페이지 너비가 320px에서 640px 사이일 때 로드됩니다. middle.png는 페이지 너비가 640px보다 클 때 로드됩니다
<picture>
<source media="(min-width: 320px) and (max-width: 640px)" srcset="img/minpic.png">
<source media="(min-width: 640px)" srcset="img/middle.png">
<img src="img/picture.png" alt="this is a picture">
</picture>
2. 다음 밤에는 화면 방향이 조건으로 추가됩니다. 화면 방향이 가로인 경우 _landscape.png로 끝나는 이미지를 로드하고, 화면 방향이 세로인 경우 _portrait.png로 끝나는 이미지를 로드합니다.
3. 다음 밤에는 화면 픽셀 밀도가 조건으로 추가됩니다. 픽셀 밀도가 2x인 경우 이미지 _retina.png를 2x로 로드하고, 픽셀 밀도가 1x인 경우 망막 접미사 없이 이미지를 로드합니다. 4. 다음 chestnut의 조건으로 이미지 파일 형식을 추가하고, webp 형식 이미지가 지원되는 경우 webp를 로드하고, 지원되지 않는 경우 png 형식 이미지를 로드합니다.
<picture>
<source media="(min-width: 320px) and (max-width: 640px) and (orientation: landscape)" srcset="img/minpic_landscape.png">
<source media="(min-width: 320px) and (max-width: 640px) and (orientation: portrait)" srcset="img/minpic_portrait.png">
<source media="(min-width: 640px) and (orientation: landscape)" srcset="img/middlepic_landscape.png">
<source media="(min-width: 640px) and (orientation: portrait)" srcset="img/middlepic_portrait.png">
<img src="img/picture.png" alt="this is a picture">
</picture>
5. 페이지는 현재 크기에 따라 현재 너비보다 크지 않은 가장 큰 이미지를 로드하도록 선택합니다. 6. 창 너비가 800px보다 크거나 같을 때 다음 속성에 크기를 추가합니다.
<picture>
<source media="(min-width: 320px) and (max-width: 640px)" srcset="img/minpic.png,img/minpic_retina.png 2x">
<source media="(min-width: 640px)" srcset="img/middle.png,img/middle_retina.png 2x">
<img src="img/picture.png,img/picture_retina.png 2x" alt="this is a picture">
</picture>
호환성: 현재 Chrome, Firefox 및 Opera만 호환됩니다. 구체적인 호환성은 그림에 표시되어 있습니다.
장점:
적절한 크기의 이미지를 로드하세요.
다양한 너비의 레이아웃 변경을 수용하기 위해 서로 다른 가로 세로 비율을 가진 이미지를 로드합니다.
더 높은 해상도의 이미지를 표시하려면 더 높은 픽셀 밀도를 로드하세요. 단계:
기능의 태그를 생성합니다.
너비(최대 너비, 최소 너비) 등 원하는 기능을 포함합니다. , 방향(orientation) 등
srcset 속성을 추가합니다. 속성 값은 해당 이미지 파일 이름이고 로드됩니다. Retina 디스플레이와 같이 다른 픽셀 밀도를 제공하려면
폴백 태그를 추가하면 됩니다.
구문
위 예제 코드에서 볼 수 있듯이 js 및 타사 라이브러리를 도입하지 않고 CSS에 포함된 미디어 쿼리 없이 요소는 HTML 전용 이미지를 사용하여 반응형으로 선언될 수 있습니다.
요소
태그 자체에는 속성이 없습니다. 놀라운 점은 가 의 컨테이너로 사용된다는 것입니다. 비디오 및 오디오와 같은 멀티미디어를 로드하는 데 사용되는 요소가 이미지 로드를 처리하도록 업데이트되었으며 몇 가지 새로운 속성이 추가되었습니다.
srcset(필수)
단일 이미지 파일 경로 허용 (예: srcset="img/minpic.png").
또는 픽셀 밀도를 설명하는 쉼표로 구분된 이미지 경로(예: srcset="img/minpic.png,img/minpic_retina.png 2x"), 1x 설명 기본적으로 사용되지 않습니다.
media (선택 사항)
CSS @media 선택기에서 볼 수 있듯이 검증된 미디어 쿼리를 수락합니다(예: media="(min-width: 320px)").
크기(선택 사항)
단일 너비 설명(예: size="100vw") 또는 단일 미디어 쿼리 너비 설명(예: size="(min-width: 320px) 100vw")을 받습니다.
또는 쉼표로 구분된 미디어 쿼리 너비 설명(예: size="(min-width: 320px) 100vw, (min-width: 640px) 50vw, calc(33vw - 100px)") 마지막 항목이 기본값으로 사용됩니다.
type(선택 사항)
지원되는 MIME 유형(예: type="image/webp" 또는 type="image/vnd.ms-photo")을 허용합니다.
브라우저는 이러한 힌트와 속성을 기반으로 정확한 내용을 로드합니다. 이미지 리소스. 태그 목록 순서에 따라. 브라우저는 첫 번째 적절한 요소를 사용하고 후속 태그를 무시합니다.
최종 요소 추가
요소는 브라우저가 지원하지 않거나 일치하는 소스 태그가 없을 때 표시되도록 사용됩니다. 내에 태그를 반드시 사용해야 합니다.
기본 이미지 표시를 선언하려면 를 사용하세요. 태그를 끝에 배치하면 브라우저는 태그를 찾기 전에 선언을 무시합니다. 이 이미지 태그에는 alt 속성도 작성해야 합니다.
이 기사는 다른 많은 기사를 참고했습니다. 그림에 대한 소개는 모두 여기에 있으므로 지금 시도해 보세요~
