大家好，我是半夏👴，一個剛剛開始寫文的沙雕程序員.如果喜歡我的文章，可以關注? 點贊 👍 加我微信：frontendpicker，一起學習交流前端，成為更優秀的工程師～關注公眾號：搞前端的半夏,了解更多前端知識! 點我探索新世界！

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

前言

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

響應式網頁設計中一個很難解決的問題就是文字的大小的問題了，面對千奇百怪的設備，如何解決文字的設配問題，是一個很重要的問題。

最初：@media

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

@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 }

加強：@media + rem

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

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

@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

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

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

這個公式最終計算出來的大小是啥？先來簡單回憶一下：

1vw = 視口寬度的 1%

1vh = 視口高度的 1%

1vmin = 1vw 或 1vh，以較小者為準

1vmax = 1vw 或 1vh，以較大者為準

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

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

結語

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

總結

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

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