我們做網(wǎng)頁(yè)寫(xiě)css代碼的時(shí)候，通常會(huì)在最前面寫(xiě)一個(gè)通用選擇符。有時(shí)候?yàn)榱俗煮w的計(jì)算，我們會(huì)將文章采用10px字體。寫(xiě)起來(lái)就像這樣：

CSS

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

在制作響應(yīng)式主題時(shí)，我們會(huì)根據(jù)所需屏幕的進(jìn)行變化，并且采用VW（View-Width）來(lái)實(shí)現(xiàn)。

比如我們準(zhǔn)備開(kāi)發(fā)一個(gè)寬度為640的網(wǎng)頁(yè)，而基礎(chǔ)字體我們?cè)O(shè)置為10px。那么我們就可以這樣計(jì)算：10/640=0.015625。因?yàn)関w是一個(gè)百分比，所以再乘以100，變成1.5625vw。

轉(zhuǎn)變后，我們的代碼就變成這樣：

CSS

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

?

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

（1）vw、vh、vmin、vmax?是一種視窗單位，也是相對(duì)單位。它相對(duì)的不是父節(jié)點(diǎn)或者頁(yè)面的根節(jié)點(diǎn)。而是由視窗（Viewport）大小來(lái)決定的，單位?1，代表類(lèi)似于?1%。

視窗(Viewport)是你的瀏覽器實(shí)際顯示內(nèi)容的區(qū)域—，換句話說(shuō)是你的不包括工具欄和按鈕的網(wǎng)頁(yè)瀏覽器。

?

（2）具體描述如下：

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

?

2，vw、vh 與 % 百分比的區(qū)別

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

（2）vw、vh?優(yōu)勢(shì)在于能夠直接獲取高度，而用?%?在沒(méi)有設(shè)置?body?高度的情況下，是無(wú)法正確獲得可視區(qū)域的高度的，所以這是挺不錯(cuò)的優(yōu)勢(shì)。

?

3，vmin、vmax 用處

做移動(dòng)頁(yè)面開(kāi)發(fā)時(shí)，如果使用?vw、wh?設(shè)置字體大小（比如?5vw），在豎屏和橫屏狀態(tài)下顯示的字體大小是不一樣的。

由于?vmin?和?vmax?是當(dāng)前較小的?vw?和?vh?和當(dāng)前較大的?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）到現(xiàn)在還只是部分支持（不支持?vmax，同時(shí)?vm?代替?vmin）

?

（2）移動(dòng)設(shè)備

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。