关于css3单位 vw vh vmin vmax

　　昨晚头儿让我研究一下viewport units:vw,vh,vmin vmax 用于移动端的利弊。我才知道还有这种单位的存在...

　　如今总结一下：

　　第一点：vw是相对是屏幕宽度的，好比50vw=屏幕宽度的50%,跟百分比有点像

　　第二点：vh是相对屏幕高度的，好比50vh=屏幕高度的50%；

　　第三点：vmin 是取宽高中最小的值为标准  vmax同理

　　注:跟px同样，vh，vw单位一样适用字体，图片宽度。

　　

　　了解后，就拿以前作的一个房产例子改改看，结果遇到一个问题：

　　　　当页面有css spirt后，背景图的size和position就难以控制，很容易出错。背景图的大小位置根据屏幕大小来定很不靠谱，

　　可是不用雪碧图的话回致使页面http请求过多，影响性能。我开始以为它只适用于一些大图片吧。

　　但又想一想，通常的设计稿都是根据2倍图设计的，只需用vw单位控制不就就好了么.... 

 

　　根据以上疑问，我又从新试了一下，雪碧图background-size， width、height用vw控制，background-size：100vw auto; (好比屏幕宽度是320px ，那么雪碧图（640*640）100vw auto也很合适啊)

　　若是页面到i6的大小的时候 background-size：375px auto; 其实这样不影响页面的，图片会自适应变大；能够本身写简单例子印证一下。

 

　　问题一：

　　咱们能精确的量出设计稿每一个元素的px，但换算成vw是有点麻烦。好比 (屏幕宽度320px)  127px  = ？ vw      

　　答案是：127/320*100=39.69vw 

　　问题二：

　　这个对安卓4.4如下的系统兼容很差，慎用~