HTML5를 사용하여 화면 크기에 따라 그림을 바꿀 때의 쓰기
HTML5에 추가된
코드 예시 중의 단점은 640px와 1024px이니 필요에 따라 적당히 조정하십시오
caniuse
소개에 따르면 IE11을 제외한 대부분의 브라우저는 사용할 수 있다고 한다
picture-srcset.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>picture要素とsrcsetの例</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<picture>
<!-- sourceのmediaにメディアクエリを、srcsetに<img srcset>の記述も対応できるっぽい-->
<source media="(max-width: 639px)" srcset="http://via.placeholder.com/640x640">
<source media="(max-width: 1023px)" srcset="http://via.placeholder.com/1024x1024">
<!-- fallback -->
<img src="http://via.placeholder.com/1920x1920" alt="image">
</picture>
<!-- IEとかIEとかIEとかで動かないのでpolyfill-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.min.js"></script>
</body>
</html>
Reference
이 문제에 관하여(HTML5를 사용하여 화면 크기에 따라 그림을 바꿀 때의 쓰기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/_takwat/articles/c4bed92f9219c2caab71텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
