設計稿以750px為寬度，其中有個元素是100px，如何設定font-size，使同一段**在不同的裝置上保持一致？
設計稿寬度
裝置寬度
html font-size
元素寬度
css**
750px
320px(iphone5)
?100px
1rem
750px
375px(iphone6/7\iphonex)
50px
100px
1rem
750px
414px(iphone6p/7p
?100px
1rem
通過上面的**可以得出，只要每個裝置計算出font-size幾個適配。
375/50=7.5 => 414/?=7.5 => 每個裝置動態計算裝置寬度/7.5即可。
(function ()
roothtml.style.fontsize = devicewidth / 7.5 + "px";
}resizebasefontsize();
window.addeventlistener("resize", resizebasefontsize, false);
window.addeventlistener("orientationchange", resizebasefontsize, false);
})();
//網頁html部分，js部分同上
*
style>
style="width:1rem;height:1rem;background: black;font-size:0.3rem;color:aliceblue;">寬：1remdiv>
style="width:2rem;height:1rem;background: orange;font-size:0.3rem;color:aliceblue;">寬：2remdiv>
style="width:4rem;height:1rem;background: green;font-size:0.3rem;color:aliceblue;">寬：4remdiv>
style="width:6rem;height:1rem;background: yellowgreen;font-size:0.3rem;color:aliceblue;">寬：6remdiv>
style="width:7.5rem;height:1rem;background: red;font-size:0.3rem;color:aliceblue;">寬：7.5remdiv>
style="width:100%;">
范德薩范德薩范德薩范德薩范德薩范德薩范德薩范德薩范德薩
可以看到我們的頁面font-size是自動變化的（根據對應的裝置寬度），並且頁面的比例保持不變。以後我們只要保持設計稿是750px寬度，設計稿裡面的元素，如果是100px，那麼在css中就寫1rem，以此類推，如果是12px，那麼就是0.12rem。就是：設計稿元素尺寸/100
設計稿寬度：750px
css全部採用rem
html的font-size動態計算：裝置寬度/7.5
元素尺寸計算為：設計稿尺寸（px）/100 ，（注意單位為rem）
在前端開發中實戰
//vue示例
"stylus">
//定義乙個方法用來從px轉vm
p2v(p)
p / 750 * 100vw;//假設設計稿是750寬度
$orange = #ff7000
.banks
padding p2v(12)//此處計算得是1.6vw，把頁面拉伸到750px寬度下，box顯示12px
border 1px olid $orange
box-shadow 1vw 1vw 1vw $orange
licolor $orange
width p2v(375)//此處計算得是50vw，把頁面拉伸到750px寬度下，box顯示375px
移動端 移動端頁面適配方案
這是mdn上的解釋 這個單位代表根元素的 font size 大小 例如 元素的font size 當用在根元素的font size上面時 它代表了它的初始值 也就是說，rem單位取值的大小和根元素html的font size取值直接相關。它跟html元素之間得關係為 html的fontsize值 ...
pc端適配移動端
1.允許網頁寬度自動調整在網頁 的頭部，加入一行viewport元標籤所有主流瀏覽器都支援這個設定，包括ie9。對於那些老式瀏覽器 主要是ie6 7 8 需要使用css3 mediaqueries.js2.不使用絕對寬度由於網頁會根據螢幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬...
移動端布局
預設以寬度為640px的設計稿為基準頁面，然後通過js獲取當前顯示裝置的尺寸，對應的調整 html 標籤的font size大小，從而實現通過以rem為單位的移動端布局適配。function win,doc function layoutcalc html.style.fontsize rem px...