現有的布局方式：
固定布局，每乙個元素都是固定的尺寸，內容區域居中在瀏覽器中間
內容區域的尺寸：980,1000,1100,1200
響應式布局，利用**查詢來實現不同尺寸的瀏覽器顯示結構不一樣 @media 根據瀏覽器解析度大小進行適配
一般會有三張設計圖，pc,平板,手機
自適應布局，屬於響應式裡的一種，利用rem、百分比、vwvh等布局單位來實現
設計圖一般只有一張，640、750居多
移動端布局
移動的螢幕和pc的螢幕有乙個很大的區別，移動端是視網膜高清屏（retina）
retina螢幕有乙個屬性叫dpr（裝置畫素縮放比） = 物理畫素/邏輯畫素
例如，iphone 6手機商宣傳手機的尺寸是：750寬，這個值就是物理畫素，而從開發者眼裡我們所指的其實是375px（邏輯畫素）
在dpr為2的手機中，我們的乙個邏輯畫素會從橫縱兩個方向分別以2個畫素點來渲染
如果不管dpr的話，其實我們布局依然可以，因為我們設定乙個畫素寬高的東西的話，在手機上看見的基本也就是這麼大，至於手機裝置用多少個物理畫素去渲染，大小還是不會變化的
設計師出圖都是2倍的，是因為，在頁面中除了字型（向量圖）大部分都是點陣圖，也就是如果乙個畫素寬高的盒子裡準備放入，如果的尺寸也是乙個畫素寬高的話，因為其實在移動端渲染的時候是用四個畫素來渲染，會失真，但是如果我們給一畫素寬高的盒子放入2畫素寬高的的話，就不會失真
布局單位
因為我們的移動裝置有很多種，所以我們的布局不可能是固定布局，所以我們要使用自適應布局我們在開發中可以選用很多自適應布局單位，這些單位必須滿足乙個條件
優點：簡單，無需設定，相容性好
缺點：基於父元素的屬性來設定，如果父元素沒有寬高，設定無效
vwvh
乙個vw等於viewport寬度的百分之一，乙個vh等於viewport高度的百分之一
vmax等於vw和vh中較大的那個 vmin等於vw和vh中較小的那個
優點：簡單，無需設定
缺點：相容性不好
rem乙個rem等於根元素（html）的字型大小，相容性很好
優點：相容好，使用簡單
缺點：需要設定
rem與適配
當我們想使用乙個自適應單位的時候，發現%有缺陷，vwvh相容性差，彈性盒所針對的是元素排列的問題，只適用於某種情況，所以我們就想，能給我乙個沒啥上面的缺陷的單位，想到了rem
rem的相容性好一點，它也確實是乙個布局單位，不受父子元素的影響，設定了rem之後，也不會對px、em等單位造成影響，它是乙個理想的單位
rem也有乙個致命的問題，就是它不是乙個自適應的單位，不會跟著裝置尺寸不同而不同，但是沒有關係，我們有萬能的js，可以去動態的設定它
方法1：
我們可以將1rem設定成螢幕的某乙個比例，比如將1rem設定成螢幕的十分之一
假設我們的設計圖是640寬的，我們拿到之後量了一下a的寬度為480px，得到比例a所佔螢幕3/4，根據rem與螢幕的關係，最後設定成7.5rem
就是說在設定元素的寬度是時候，會根據設定好的比例關係去進行換算
方法2：
如果設計圖是640的圖，這個時候我們知道它是照著i5來的，我們現在假設世界上所有的手機都是320的，也就是每乙個人用的都是i5，在這個理想的情況下，因為手機都一樣，尺寸都一樣，和pc端的固定布局也就一樣了
假設有乙個在640的圖上我們量得的寬度是320，因為是二倍圖，所以我們知道，它的實際寬度是160px，這樣的話，我們直接給這個設定設定width：160px就可以了，這個時候，我們玩個花子，不要單純的使用px來設定，用rem來設定，例如，我可以將rem設定為100px，這樣的，剛才的盒子設定為width：1.6rem，演算法就是 量的寬度/(dpr*100) = 要設定的rem值
這樣我們就可以開心的開發，量乙個尺寸，除個2，再小數點推兩位，設定就行了，但是我們也知道，手機的尺寸並不可能都是320，這樣的話，沒有關係，我們可以根據乙個比例來算rem到底設定為多少
在手機寬度為320的時候，我們設定的1rem=100px，所以有乙個比例 b = 100/320
那麼在w寬度的手機上，1rem應該是多少呢？設為x 那麼x/w = b
得到x = w/3.2
那麼就不要寫死html的fontsize為100了。而是用js去設定：
document.documentelement.style.fontsize = document.documentelement.clientwidth/3.2 + 'px』
這樣，我們就可以得到乙個自適應的rem
方法3：
rem與vw結合
vw、vh是一種視窗單位，也是相對單位。它相對的不是父節點或者頁面的根節點。而是由視窗（viewport）大小來決定的，單位 1，代表類似於 1%。
視窗(viewport)是你的瀏覽器實際顯示內容的區域—，換句話說是你的不包括工具欄和按鈕的網頁瀏覽器。
vw：視窗寬度的百分比（1vw 代表視窗的寬度為 1%）
vh：視窗高度的百分比
vmin/vmax
vmin：當前 vw 和 vh 中較小的乙個值
vmax：當前 vw 和 vh 中較大的乙個值
100px = ? rem
100px = ? vw
假設視窗寬度為750px
1vw = 7.5px
1rem = 100px/7.5px = 13.333333333vw
然後只需設定
750px設計圖：
html
640px設計圖：
html
1080px設計圖：
html
移動端布局及適配（rem）
首先清除一下預設樣式，這個基本上所有寫h5的都通用 a,input,button input,button body body bodyh1a ulimg html,body 現在我們看看如何使用rem解決適配問題 rem vs em rem的r代表root rem 是相對根節點的字型大小進行計算的...
移動端頁面適配，rem布局
移動端頁面適配 em 根據元素自身的字型大小來計算自己的尺寸 rem root em 根據根節點 html 的字型大小來計算自己的尺寸 適配 各個移動裝置，解析度大小不一致，使我們的頁面在各種解析度下都顯示完好 等比的縮放 根據螢幕的解析度 動態的設定html的字型大小，來達到頁面等比縮放的功能 注...
移動端rem適配
3 使用js 將設計圖劃分為10等份或者15等份。新建common.less檔案，這是乙個專門來適配的檔案。我們大概可以寫如下的檔案 設定常見的螢幕尺寸 修改裡面的html文字大小 a 一定要寫到最上面 html 我們此次定義的劃分的份數 為 15 no 15 320 media screen an...