原理：
postcss: function() )]; // 視覺稿的1/10
}
font-size為document寬度的1/10
iphonexr的解析度：1792 * 828 || pt: 896 * 414 || dpr: 3
iphonexs 的解析度： 2436 * 1125 || pt: 812 * 375 || dpr: 3
iphonexs max 的解析度：2688 * 1242 || pt: 896 * 414 || dpr: 3
可以看到xs和x的解析度和dpr是相同的，xr和xsmax的解析度和dpr是相同的，因此，css可以這樣適配：
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)
H5移動端適配總結
因此通過查閱資料，了解到兩種螢幕適配的方案 1.通過對介面進行等比例縮放 2.使用rem單位進行介面的適配。1 第一種方式屬於有一種暴力適配，即通過計算設計人員給出的設計稿的尺寸和裝置的真實尺寸，將這個比值作為縮放比賦值飛meta標籤，但是這種情況下往往會出現字型和的失真或者銳化。實現 大致如下 以...
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 是相對根節點的字型大小進行計...