H5移動端 移動端布局及適配（rem）

首先清除一下預設樣式，這個基本上所有寫h5的都通用

a,

input,
button 
input,
button 
body 
body * 
body 
h1 a 
ul img 
html,
body

rem vs em (rem的r代表root)

rem 是相對根節點的字型大小進行計算的

em 是相對長度單位。相對於當前物件內文字的字型尺寸。

document.documentelement.style.fontsize = document.documentelement.clientwidth / 6.4 + 'px';

先拿設計稿豎著的橫向解析度除以100得到body元素的寬度：

- hide code

如果設計稿基於iphone6，橫向解析度為750，body的width為750 / 100 = 7.5rem

如果設計稿基於iphone4/5，橫向解析度為640，body的width為640 / 100 = 6.4rem

有一篇博文寫的非常好，推薦看看從網易與**的font-size思考前端設計稿與工作流

總結一下，假如你初次j接觸移動端h5，來不及看上面的原理，那麼直接引入下面**，然後設計稿中有個寬度是109px，那麼你直接寫成1.09rem。(前提是設計稿是750px哦，如果設計稿是375那麼7.5也要改)

當然還有其他的方式，以後再說，這個已經足以解決工作中的困惑了！

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移動端適配總結

因此通過查閱資料，了解到兩種螢幕適配的方案 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...