html5图片自适应

[maocheng82]

<meta name="viewport" content="width=device-width, initial-scale=1">
最近在做移动WEB 有个问题要像大家请教
如图

图片宽度一般要设置多大 才能保证 各型号手机宽度都是全屏的，如果图片宽度弄的太大 加载速度也会变慢
设置的太小 有可能导致手机右边一部分空白

还有4.7寸的苹果六手机 如果转化成电脑像素 它的宽是多少像素的， 是怎么计算的？？？？一直搞不明白

[恍恍惚惚哈哈哈]

保持各型号手机宽度都是全屏的，要用到@media实现响应式。在不同屏幕大小下使用不同尺寸。

@media screen and (min-width: 768px) and (max-width:1400){}
@media screen and (max-width:480)
@media screen and (min-width:480)

例如：指定媒体类型大于或等于768px时class为.container的div最大宽度为1000px。图片属性设置width="100%" height="100%"就可以了。

@media (min-width: 768px) {
  .container {
    max-width: 1000px;
  }
}

具体怎么用@media实现响应时看这个吧http://www.daimatree.com/dll_website/dll_showHTML.php?html_url=CSS_media_query 像素的话不好转换，看过一个计算公式 pixels = dips * (density / 160)，不过我计算过过。

[Devin.qu]

用bootstrap框架

[Lacy-Gr]

img{width:100%}