HTMLã®srcsetを使ã£ã¦ç”»åƒã‚’レスãƒãƒ³ã‚·ãƒ–ã«Retina対応ã•ã›ã¦ã¿ã‚ˆã† | Kia King
WEBã§ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–対応ã™ã‚‹ã¨ãã«çµæ§‹å¤§å¤‰ãªã®ãŒç”»åƒã®æ‰±ã„。iPhoneç‰ã®é«˜è§£åƒåº¦ãƒ‡ãƒã‚¤ã‚¹(Retinaディスプレイç‰)ã«ã¯2å€ã®ç”»åƒã‚’用æ„ã™ã‚‹å¿…è¦ãŒã‚ã‚‹ã—ã€æœ€è¿‘ã¯ç”»é¢ã®ã‚µã‚¤ã‚ºã«ä¼šã‚ã›ã¦ç”»åƒã‚’切り替ãˆãŸã„å ´åˆã‚‚多ã„。ãã‚“ãªæ™‚ã«HTML5ã®srcsetãŒã™ã“ã¶ã‚‹ä¾¿åˆ©ã ã£ãŸã®ã§ã”紹介ã—ã¾ã™ã€‚ srcsetã§ã§ãã‚‹ã“㨠次ã®ã‚ˆã†ãªã“ã¨ãŒå¯èƒ½ã«ãªã‚Šã¾ã™ã€‚ Retinaディスプレイ用ã«ç”»åƒã‚’切り替ãˆã‚‹ ウィンドウサイズã«åˆã‚ã›ã¦ç”»åƒã‚’切り替ãˆã‚‹ ウィンドウサイズã«åˆã‚ã›ã¦å‹•çš„ã«ç”»åƒã‚’切り替ãˆã‚‹ Retinaディスプレイ用ã«ç”»åƒã‚’切り替ãˆã‚‹ 基本的ãªä½¿ã„æ–¹ã¯ä¸‹è¨˜ã®ã‚ˆã†ãªæ„Ÿã˜ã§imgã‚¿ã‚°ã«ä½¿ç”¨ã—ã¾ã™ã€‚シンプルã§ã™ã。 <img src="img/example-img.jpg" srcset="img/example-img.jpg 1x, img/[email protected] 2x" alt
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
処ç†ã‚’実行ä¸ã§ã™
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
https://tympanus.net/codrops/wp-content/uploads/2012/10/VerticalShowcaseSlider.jpg
{{#tags}}- {{label}}
{{/tags}}