關於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如下的系統兼容很差，慎用~