图片元素正在迅速普及(http://caniuse.com/#search=picture),我认为这是避免提供过大/过小图片的好方法,特别是当您想要在移动设备和桌面设备上以 100% 的比例显示相同的图片时视口(viewport)宽度。
可以这样解决:
<img
srcset="large.jpg 1920w,
medium.jpg 720w,
small.jpg 360w"
src="medium.jpg">
这让浏览器很聪明,可以决定加载哪张图片,但我发现这种做法有一个问题:许多移动设备的像素密度为2或更大!因此,当以 360w 显示它时,如果我们希望该图像看起来清晰,我们实际上需要中等图像。可以这样做:
<picture>
<source srcset="http://goo.gl/LsuU9t" media="(min-width: 720px)">
<source srcset="http://goo.gl/LsuU9t" media="(min-width: 360px and min-resolution: 2dppx)">
<img src="http://goo.gl/LsuU9t">
</picture>
在我看来,这里的问题是它会随着屏幕分辨率的增加而增加,我们失去了浏览器巧妙地决定最佳选择的好处。
所以,我的问题是,如果两者之间有中间点,那么我仍然可以将 html 和 css 分开。
最佳答案
浏览器在选择图像时会考虑像素密度。因此,具有 360 CSS px 宽视口(viewport)和 2x 像素密度的设备将选择 medium.jpg。这正是 w
描述符和 sizes
属性旨在解决的问题!不要在这里使用图片
。
关于html - 如何在手机上使用图片元素获得清晰的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32690355/