1. 設定2. 設定 html （10.48px = 16px*65.5% = 1rem )
3 .頂部與底部的bar不管解析度怎麼變，它的高度和位置都不變, 每個列表的高度也不變
4. 設定文字字型 例如 16px時
(1）動態設定viewport的scale
var scale = 1 / devicepixelratio; document.queryselector('meta[name="viewport"]')
.setattribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
（2）動態計算html的font-size
document.documentelement.style.fontsize = document.documentelement.clientwidth / 10 + 'px';
（3）各元素的css尺寸 = 設計稿標註尺寸/(設計稿橫向解析度/10)
（4）font-size需要額外的媒介查詢，並且font-size不使用rem
(5)
flex布局教程：語法篇（1）先拿設計稿豎著的橫向解析度除以100得到body元素的寬度：
如果設計稿基於iphone6，橫向解析度為750，body的width為750 / 100 = 7.5rem
如果設計稿基於iphone4/5，橫向解析度為640，body的width為640 / 100 = 6.4rem
（2）在dom ready以後，通過以下**設定html的font-size:
document.documentelement.style.fontsize = document.documentelement.clientwidth / 6.4 + 'px';
(3) font-size需要額外的媒介查詢
(4) 當devicewidth大於設計稿的橫向解析度時，html的font-size始終等於橫向解析度/body元素寬
var devicewidth = document.documentelement.clientwidth;
if(devicewidth > 640) devicewidth = 640;
document.documentelement.style.fontsize = devicewidth / 6.4 + 'px';
移動端適配 適配方案總結
通過特定的限制，控制不同樣式的呈現 限制條件最終返回true false，為真，應用其樣式 12 stylesheet media max width 800px href example.css 34 5操作邏輯 only,and,not 你可以使用邏輯操作符，包括not and和only等，構建...
移動端適配方案總結
瀏覽器的視窗。viewport與跟viewport有關的meta標籤的關係，詳細建議讀一讀這篇文章 移動前端開發之viewport的深入理解，viewport與布局的關係，可以看下這篇文章 在移動瀏覽器中使用viewport元標籤控制布局 visual viewport可見視口 螢幕寬度 layou...
移動端適配方案
最簡單的移動端適配方案 rem vw 1vw等於螢幕寬度的1 1vh等於螢幕高度的1 通常設計稿為750寬度，螢幕總寬度為100vw 那麼 100vw 750px 1px 1px 100 750 1px就等於0.13333333vw 把單位放大100倍便於計算 html設計稿畫素單位轉換為rem單位...