我們做網頁寫css代碼的時候，通常會在最前面寫一個通用選擇符。有時候為了字體的計算，我們會將文章采用10px字體。寫起來就像這樣：

CSS

*{ margin: 0; padding: 0; border: none; font-size: 10px; }

在制作響應式主題時，我們會根據所需屏幕的進行變化，并且采用VW（View-Width）來實現。

比如我們準備開發一個寬度為640的網頁，而基礎字體我們設置為10px。那么我們就可以這樣計算：10/640=0.015625。因為vw是一個百分比，所以再乘以100，變成1.5625vw。

轉變后，我們的代碼就變成這樣：

CSS

*{ margin: 0; padding: 0; border: none; font-size: 1.5625vw; }

?

1，vw、vh、vmin、vmax 的含義

（1）vw、vh、vmin、vmax?是一種視窗單位，也是相對單位。它相對的不是父節點或者頁面的根節點。而是由視窗（Viewport）大小來決定的，單位?1，代表類似于?1%。

視窗(Viewport)是你的瀏覽器實際顯示內容的區域—，換句話說是你的不包括工具欄和按鈕的網頁瀏覽器。

?

（2）具體描述如下：

• vw：視窗寬度的百分比（1vw?代表視窗的寬度為?1%）
• vh：視窗高度的百分比
• vmin：當前?vw?和?vh?中較小的一個值
• vmax：當前?vw?和?vh?中較大的一個值

?

2，vw、vh 與 % 百分比的區別

（1）%?是相對于父元素的大小設定的比率，vw、vh?是視窗大小決定的。

（2）vw、vh?優勢在于能夠直接獲取高度，而用?%?在沒有設置?body?高度的情況下，是無法正確獲得可視區域的高度的，所以這是挺不錯的優勢。

?

3，vmin、vmax 用處

做移動頁面開發時，如果使用?vw、wh?設置字體大小（比如?5vw），在豎屏和橫屏狀態下顯示的字體大小是不一樣的。

由于?vmin?和?vmax?是當前較小的?vw?和?vh?和當前較大的?vw?和?vh。這里就可以用到?vmin?和?vmax。使得文字大小在橫豎屏下保持一致。

?

4，瀏覽器兼容性

（1）桌面?PC

• Chrome：自?26?版起就完美支持（2013年2月）
• Firefox：自?19?版起就完美支持（2013年1月）
• Safari：自?6.1?版起就完美支持（2013年10月）
• Opera：自?15?版起就完美支持（2013年7月）
• IE：自?IE10?起（包括?Edge）到現在還只是部分支持（不支持?vmax，同時?vm?代替?vmin）

?

（2）移動設備

• Android：自?4.4?版起就完美支持（2013年12月）
• iOS：自?iOS8?版起就完美支持（2014年9月）

總結

以上是生活随笔為你收集整理的font-size用VW来写的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。