寫手機端自適應的前端，一般用啥實現？
1. 用 rem 單位
以寬為 750px 的移動設計稿為例：
// 屏幕適配（windowWidth/設計稿寬*100） ——*100為了方便計算。即font-size值是手機deviceWidth與設計稿比值的100倍
document.getElementsByTagName(html)[0].style.fontSize=window.screen.width/7.5+px;
// 如上：通過查詢屏幕寬度，動態的設置html的font-size值，設計稿大多以750*1334 設置的，通過上述換算後，在設計圖上一張150*150的圖，在css中對應的rem值則為：1.5*1.5rem
用法 ：
比如上圖的，全省的寬 280px ,高 58px , 正常開發下，程序的css上需要寫 ：
{
width: 280px;
height: 58px;
}
但是我們只需要：：
{
width: 280 / 100 rem;
height: 58 / 100 rem;
}
也即是：
{
width: 2.8rem;
height: 0.58rem;
}
換算公式就是具體: 像素/100 = rem, 還能指定 7.5rem 寬 就是屏幕的總寬
如果是寬為 1080px 的設計稿：
document.getElementsByTagName(html)[0].style.fontSize=window.screen.width/10.8 +px;
如上內容，就可以適配移動端了。
激進點的話直接vw
移動端開發主要有兩種技術選型：
一.單獨製作移動端頁面（主流）
優點是開發便利，不用考慮兼容性。
單獨頁面又分四種技術選型：
1. 流式布局（百分比布局）
每個盒子的寬度單位使用百分之幾，不受像素限制。
2. flex彈性布局 （常見）
布局簡單，不用算盒子的寬度。圍繞flex相關屬性進行布局
3. rem + 媒體查詢手寫布局
rem是盒子的寬度/長度單位，類似於em，會根據視口大小來調整每一個單位的大小。
媒體查詢@media 也可以根據視口大小來設置盒子不同的樣式
4. 混合布局（常見）
我全都要
二.響應式
一個頁面多套布局來實現響應式，缺點製作麻煩，兼容性問題大。
1. 手寫媒體查詢
2. 使用boostrap框架
先碼到這裡，有時間再更
柵格化~
bootstrap
藉助於框架或者自己根據@media screen區分樣式。做好規劃就行了
- @media screen：根據顯示器像素比來動態修改控制項顯隱（主要用於pc）
- vw：目前市面很少出現但及其好用的適配單位，設置在根節點上
- rem：rem（依據 - 根節點），美團和去哪網就採用的這個oo~
- % + em：百分比決定寬高，em（依據-父節點）決定細節（如字體，shadow等）
html+css
推薦閱讀：
