基準html
機型寬度(可視區域)
螢幕比例
html font-site
元素寬度(px)
元素寬度(rem)
iphone6 plus(基準)
414px()
110px
200px
10rem
iphone6
375px
375/414 =0.9057
(375/414)*10 =9.058 px
iphone5
320px
320/414 =0.7729
(320/414)*10 =7.729 px
iphone4
320px
320/414 =0.7729
(320/414)*10 =7.729 px
ipad&mini
768px
768/414 =1.8551
(768/414)*10 =18.551 px
...榮耀6 plus、紅公尺2、小公尺2
360360/414= 0.8695652173913043
魅族4 pro
384384/414= 0.927536231884058
瀏覽器字型最小可以設定12px，在小於12px不起作用。
計算裝置大小：$(window).width()
方案：使用js動態計算出裝置的寬度，進而計算出html中的font-size大小,其他標籤使用rem單位。
iphone6s、iphone6 :測試完成 (ok)
雙欄布局：float:left;
標籤是否可以隱藏一部分: 使用背景裁切
複製**
適配方案：使用js動態計算出裝置的寬度，進而計算出html中的font-size大小（依照iphone6 plus為基準，414px）
var _csstext = document.queryselector("html").style.csstext;
document.queryselector("html").style.csstext = _csstext +
"font-size:"+100*($(window).width())/414+"px !important";
複製**
@media適配移動端，例如下面適配iphone6 plus，其他使用rem單位
@media screen and (min-width: 414px) and (max-width: 767px)
}複製**
Html5移動端網頁端適配 js rem
業務場景 由於需求是適配兩端螢幕，所以剛開始想的css用rem寫，但是還是會出現字型和布局不會等比縮放的情況，後來找到一種js 針對根元素去做的縮放配置，加上rem和這個js的設定就能做到等比縮放。在這裡插入描述 在這裡插入描述 重啟，效果圖 在這裡插入描述 2.新建乙個index.js，把下方 複...
HTML5移動端優化
手機端筆記 float在渲染時計算量比較大，儘量減少使用 過多的font size引發css樹的效率 a 避免不必要的dom操作 b 盡量改變class而不是style，使用classlist代替classname c 避免使用document.write d 減少drawimage meta na...
html5移動端開發
移動端開發準備 1 meta標籤的設定 h5頁面視窗自動調整到裝置寬度，並禁止使用者縮放頁面 忽略將頁面中的數字識別為 號碼 忽略android平台中對郵箱位址的識別 2 重點設定 width device width 寬度等於當前裝置的寬度 initial scale 初始的縮放比例 預設設定為1...