img width 百分比_手机端之img的width:100%解析(百分比显示)

啦啦啦, 我是菜鸟, 写的是不是太简单了, 大神可以略过

手机端页面展示, 有用px, em, rem, 比分比%的, 该怎么选?

1)px: 不管手机大小屏幕, 展示都一样, 所以, iphone5看着不会太小, iphone6看着不会太大,

用的挺多的.

2)em: 还没有用, 听说有点复杂, 后续补上

3)rem: 会根据手机屏幕大小自动调整大小, 做过一个展示页面, 同事的反馈是iphone5看着太小,

iphone6P看着太大, 囧(技术同事做项目都是用的rem的).

4)百分比%: 适合全部是图片的纯动效切换, 父元素宽高100%设置后, 里面的元素position:absolute;定位,

left, right, top, width皆是百分比; 图片素材还是按设计尺寸切图, 比如640px的, 元素切出来后,

根据640px算百分比, 比如元素宽320px, 所以widh:50%.

重点来了, 我问题是为什么img要设置width:100%, 解析如下, 逆推:

(原图小人210px*470px, iphone6尺寸:375px*667px)

1) img的width:100%;, 意味着img的宽由父元素A决定;

2) img的父元素A的width:33%, 意味着父元素A的宽由再外层父元素B来决定,

B的宽是手机端满屏宽度375px(iphone6下), A的width:33%, 就是123.75px,

即img的宽123.75px