大家好，我是半夏👴，一個(gè)剛剛開始寫文的沙雕程序員.如果喜歡我的文章，可以關(guān)注? 點(diǎn)贊 👍 加我微信：frontendpicker，一起學(xué)習(xí)交流前端，成為更優(yōu)秀的工程師～關(guān)注公眾號(hào)：搞前端的半夏,了解更多前端知識(shí)! 點(diǎn)我探索新世界！

原文鏈接 ==>http://sylblog.xin/archives/52

前言

一個(gè)網(wǎng)頁(yè)中最多的東西是啥? 正常人的第一反映肯定是文字，你要是跟我說是圖片，那我只能表示：

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)中一個(gè)很難解決的問題就是文字的大小的問題了，面對(duì)千奇百怪的設(shè)備，如何解決文字的設(shè)配問題，是一個(gè)很重要的問題。

最初：@media

下面是兩個(gè)簡(jiǎn)單的例子，通過使用媒體查詢，改變字體在不同設(shè)備下的文字大小。這種做法的缺點(diǎn)在哪里呢？是因?yàn)閜x是固定的，如果你設(shè)置的設(shè)備的寬度范圍比較大，那么就會(huì)導(dǎo)致當(dāng)前的px在另一個(gè)設(shè)備上看上去很大或者很小。另一個(gè)問題是；你不可能所有的文字都用這個(gè)大小，還需要針對(duì)其他的文字進(jìn)行單獨(dú)的處理，很麻煩。代碼也很多。

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)and (-webkit-min-device-pixel-ratio: 2) {html{font-size:**px;}}@media only screen and (min-device-width: 320px) and (max-device-width: 480px)and (-webkit-min-device-pixel-ratio: 2)and (orientation: portrait) {**px }

加強(qiáng)：@media + rem

rem就是html根元素font-size字體大小的倍數(shù)。

依賴于rem的特性，比較好的解決了，不同文字不同大小的問題。但是還是如何選擇設(shè)備寬度區(qū)間還是比較復(fù)雜的問題。

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)and (-webkit-min-device-pixel-ratio: 2) {html{font-size:**px;}p{font-size:1rem; }

:root + vm + vh

對(duì)于我來說，我最喜歡的就是使用:root來做，但是你也可以選擇html，在:root中根據(jù)vm和vh來計(jì)算出字體的大小，從而實(shí)現(xiàn)設(shè)配不同的設(shè)備。

:root {font-size: calc(1vw + 1vh + .5vmin); }body {font-size: 1rem/1.6 }

這個(gè)公式最終計(jì)算出來的大小是啥？先來簡(jiǎn)單回憶一下：

1vw = 視口寬度的 1%

1vh = 視口高度的 1%

1vmin = 1vw 或 1vh，以較小者為準(zhǔn)

1vmax = 1vw 或 1vh，以較大者為準(zhǔn)

如果我們將其應(yīng)用于 iPhone 7 的視口尺寸，即 375x667，計(jì)算出的值為:root：

:root {font-size: calc(3.75px + 6.67px + 1.875px); /* 1vw + 1vh + .5min */ }

結(jié)語(yǔ)

這幾個(gè)方法都可以使用，但我還是堅(jiān)持:root。除了這幾種方法，還有其他的方法，例如使用JS在頁(yè)面，根據(jù)視口的寬高，在根元素上設(shè)置文字的大小，這樣也是很好的一種解決方法，可自行嘗試。

總結(jié)

以上是生活随笔為你收集整理的root + vm vh 实现响应式字体的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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