這兩天在做移動端首頁，總結一下移動端相關的知識點。
viewport
在未設定meta標籤時，viewport一般為980px。
viewport主要有以下幾個設定：
width：數值（不帶單位），device-width
height：數值（不帶單位），device-height
initial-scale：初始縮放值
minimum-scale：最小縮放值
maximum-scale：最大縮放值
user-scalable：是否允許使用者縮放
dprdpr(device pixel ratio) = 物理畫素/邏輯畫素；
dpr可以通過window.devicepixelratio獲得；
在不存在縮放的情況下：
pc的dpr一般為1，即css中1px對應1px物理畫素；
ip6的pdr為2，即css中1px對應2px物理畫素；
ip6plus的pdr為3，即css中1px對應3px物理畫素；
但是對於安卓，有一些奇葩的dpr。
dpr所帶來的影響：
的尺寸一般要為顯示尺寸 * dpr
設計稿中的1px邊框需要設定為0.5px
width與device-width
在使用**查詢設定小屏斷點時要注意區分width與device-width。
在desktop上使用device-width時，不管瀏覽器如何縮小都是不會相應的。
而使用width是會適配瀏覽器縮小，但是，如果移動端頁面是根據width來做，那麼在電腦上縮小瀏覽器也可以看到移動端頁面。
其實就是要區分width和device-width。
width：指的是瀏覽器的寬。
device-width：指的是裝置螢幕的寬，裝置螢幕的寬在同一裝置上是不會變的。
有兩個操作會影響width，一是縮小瀏覽器，二是設定縮放比例。
因此在解析度2560px，dpr為2的imac，它的device-width一般是1280px，但系統一般都會針對這種情況預設設定縮放比例，例如縮放比為150%。那麼實際上它的device-width就是1707px，滿屏情況下width也是1707px。
除錯對rem的設定主要有兩種方法，**查詢與js動態設定。
**查詢如果想要相容更多的裝置就要設定更多的合適的斷點，因此使用js或許會更為方便一些。
假設我們拿到了750px的設計稿，至於為什麼是750px，因為dpr為2時，我們需要使用750px的圖才能保證在ip6上顯示不失真。
在rem的設定上，有直接使用100px的也有使用75px的。
**的flexiable方案所使用的就是75px。
其實使用sass或者less的話，font-size設成多少對於碼**都沒有多大影響。
使用scale
var dpr,rem,scale;
var doc = document.documentelement;
var font = document.createelement("style");
var meta =document.queryselector("meta[name='viewport']");
dpr = window.devicepixelratio || 1;
rem = doc.clientwidth * dpr / 10;
scale = 1/dpr;
meta.setattribute('content', 'width=' + dpr * doc.clientwidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
doc.setattribute('data-dpr',dpr);
font.innerhtml = 'html';
**的解決方案下：
拿到750px的設計稿，預設font-size為750/10=75px；
設計稿上有乙個高300px的div，那麼div.height = 4rem;
不使用scale
看了一下網易的移動端，有三個需要注意的點：
1. 預設scale就為1，並且在html標籤上加了個data-dpr=1的屬性，可以理解為就無視dpr了嗎？
2. 對於的處理，網易在不同的裝置下都是用750px的，並且寬度100%。
3. 字型使用的也是rem
網易的解決方案下：
拿到750px的設計稿，預設font-size為750/7.5=100px；
設計稿上有乙個高300px的div，那麼div.height = 3rem;
在375的情況下，font-size設為50px。
在此基礎上進行換算就可以了。
比較兩種做法
兩種做法的區別就在於是否根據dpr進行縮放。
dpr所帶來的影響就如上文提到的那樣主要有那兩種。
使用縮放：
需要根據dpr設定font-size.
body
[data-dpr ="2"]
body
[data-dpr = "3"]
body
使用**查詢斷點設定字型大小
@media screen and (max-width:375px)
}@media screen and (max-width:414px)
}
移動端架構那些事
好久沒有寫點什麼了，今天就來說說移動端架構的那些事兒吧。先來看看移動網際網路的發展史，看下圖 質量效率及效能不必多說，我來說說其他幾點 動態性 舉個栗子，如果發現線上bug,通過傳統方式修改之後必須要重新打包發布應用市場，使用者安裝等一系列流程，一次兩次沒什麼所謂，次數多了，使用者肯定就會解除安裝掉...
JS PC端設定rem 移動端設定rem
window.onresize function 頁面剛重新整理時呼叫 init function init const basesize 32function setrem 初始化 setrem window.onresize function 這裡是乙個pc和h5的 rem樣式 寫在了乙個htm...
移動端rem使用
1 移動端設計圖750時，html font size 50px。使用方法 1 新增viewport。2 在頁面最裡面引入該段js 建議在head裡面引入 3 css 的編寫，設計圖為750px時，頁面標註大小除以100即可，例如 設計圖標註的是，寬300px,高300px。使用rem就是，widt...