如果要實現(xiàn)這種彈性自適應(yīng)效果挪圾，目前主流的實現(xiàn)是通過設(shè)定根元素的font-size大小，具體元素或模塊使用rem或em單位來實現(xiàn)懦傍。
一種是直接設(shè)定一個臨界點字體大小鱼蝉，如：
html {
font-size: 16px;
}
@media screen and (min-width: 600px) {
html {
font-size: 18px;
}
}
@media screen and (min-width: 1000px) {
html {
font-size: 22px;
}
}
還有一種就是使用JS在resize或者屏幕旋轉(zhuǎn)的時候，動態(tài)修改root的font-size大小院尔。
例如纹烹，我們希望瀏覽器寬度在600px~1000px變化的時候，html根元素的font-size大小是18px~22px之間對應(yīng)變化的召边，則可以：
html { font-size: calc(18px + 4 * (100vw - 600px) / 400); }
蘋果系統(tǒng)的Safari瀏覽器不認識上面的屬性值（如下截圖）：
我們基礎(chǔ)字體大小不使用像素單位，使用百分比單位即可
html { font-size: calc(112.5% + 4 * (100vw - 600px) / 400); }
根據(jù)實踐裹驰，下面這段CSS是最好的基于rem和vm和calc實踐代碼：：
html {
font-size: 16px;
}
@media screen and (min-width: 375px) {
html {
/* iPhone6的375px尺寸作為16px基準(zhǔn)隧熙，414px正好18px大小, 600 20px */
font-size: calc(100% + 2 * (100vw - 375px) / 39);
font-size: calc(16px + 2 * (100vw - 375px) / 39);
}
}
@media screen and (min-width: 414px) {
html {
/* 414px-1000px每100像素寬字體增加1px(18px-22px) */
font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
font-size: calc(18px + 4 * (100vw - 414px) / 586);
}
}
@media screen and (min-width: 600px) {
html {
/* 600px-1000px每100像素寬字體增加1px(20px-24px) */
font-size: calc(125% + 4 * (100vw - 600px) / 400);
font-size: calc(20px + 4 * (100vw - 600px) / 400);
}
}
@media screen and (min-width: 1000px) {
html {
/* 1000px往后是每100像素0.5px增加 */
font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
}
}
