前言
一個網頁中最多的東西是啥? 正常人的第一反映肯定是文字，你要是跟我說是圖片，那我只能表示：
回應式網頁設計中一個很難解決的問題就是文字的大小的問題了，面對千奇百怪的設備，如何解決文字的設配問題，是一個很重要的問題，
在上一篇文章學透CSS-合理使用這8個單位,讓你的網站Responsive中我們介紹了8個回應式單位，大多數回應式字體的解決方案基本都是依賴于這幾個單位來進行解決的，
最初：@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在頁面，根據視口的寬高，在根元素上設定文字的大小，這樣也是很好的一種解決方法，可自行嘗試，
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/305745.html
標籤：其他
上一篇：Android 四大組件之一：BroadCastReceiver動態注冊廣播流程
下一篇：【演算法學習】LCP 44. 開幕式焰火（java / c / c++ / python / go / rust）