因此通過查閱資料，了解到兩種螢幕適配的方案：1.通過對介面進行等比例縮放；2.使用rem單位進行介面的適配。
1、第一種方式屬於有一種暴力適配，即通過計算設計人員給出的設計稿的尺寸和裝置的真實尺寸，將這個比值作為縮放比賦值飛meta標籤，但是這種情況下往往會出現字型和的失真或者銳化。
實現**大致如下：
/*以下**通過縮放方式實現為不同螢幕下適配設計稿尺寸js（不推薦）*/
function flex(designwidth);
比如：我們設定html標籤的樣式為
html:理解了rem的意義之後我們再談介面的適配，我們要實現對不同尺寸的介面的適配，那麼我們只要根據不同尺寸的介面給介面的根元素設定不同的字型大小即可，這樣rem這個我們要使用的單位代表的尺寸就會隨著介面的尺寸的改變而改變了，我們就可以按照設計稿給出的尺寸來寫我們的前端樣式了。
這個適配的**主要分為以下幾步：
1、設定基準字型大小
2、設定介面尺寸變化事件的監聽，重新整理基準字型大小
3、在布局中使用rem單位編寫介面樣式
**如下：
/*以下**為不同螢幕下字型通過rem適配設計稿的方案
@designwidth 設計稿的全屏寬度
@maxwidth 適配的最大寬度
*/(function(designwidth, maxwidth) ;
if (width > maxwidth)
var rem = width/designwidth*100;
//得到的rem基準字型大小，這裡乘以100是為了適配有的瀏覽器不識別小數，會導致設定字型無效。
//設定根元素html的字型大小為基準字型大小，在css中每rem就是這個值的大小。
remstyle.innerhtml = 'html ';
}refreshrem();
if (docel.firstelementchild) else
/* 以下為在不同的時機重新計算rem*/
win.addeventlistener("resize", function() , false);
win.addeventlistener("pageshow", function(e)
}, false);
})(750, 750);
比如：設計稿給出
div:div:h5移動端適配
原理 postcss function 視覺稿的1 10 在index.html中指定 font size為document寬度的1 10 iphonex 的解析度 2436 1125 pt 812 375 dpr 3 iphonexr的解析度 1792 828 pt 896 414 dpr 3 i...
h5移動端適配方案
flex布局 flex布局，不使用rem，直接使用px。doctype html html head title title style 利用flex屬性，可以實現塊級元素1 1 1 簡單的就能使裡面的內容居中 尤其是垂直居中，好用到爆 box item1 item2 item3 style hea...
H5移動端 移動端布局及適配（rem）
首先清除一下預設樣式，這個基本上所有寫h5的都通用 a,input,button input,button body body body h1 a ul img html,body現在我們看看如何使用rem解決適配問題 rem vs em rem的r代表root rem 是相對根節點的字型大小進行計...