-
為什么要做移動端適配？
- 我們開發使用px（CSS pixel）的是
邏輯像素，以至於在不同分辨率的設備上同一個UI設計圖展示效果會被伸縮變形，所以需要做移動端適配
- 我們開發使用px（CSS pixel）的是
-
通過歷史進程進一步認識！
- 早期諾基亞板磚機時代，樣式直男單一、設備少（哪種設備需要即去重新開發一套即可），此時的
設備像素比被通俗地固定在1（分辨率：物理像素/發光點），當后續各式尺寸、各式屏幕大小出現，希望能通過一套代碼自適應不同設備（摸魚就是第一生產力）
偉大的喬布斯提出了retina display 視網膜屏可以多個物理像素（2*2）構成一個邏輯像素。所以接下來針對不同分辨率的設備，都可以通過處理設備像素比達到統一邏輯像素分辨率
- 早期諾基亞板磚機時代，樣式直男單一、設備少（哪種設備需要即去重新開發一套即可），此時的
rem、vw、vh：（等比例縮放）
1 rem = 1 * ducument.ducumentElement.style.fontSize 大多數瀏覽器默認為 HTML標簽 font-size 為 16 px
// 進行一個監聽配置
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; // 核心代碼，這里的值可以自定義設置
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
<meta name="viewport" content="width=device-width, initial-scale=1.0"> width可以設置定值，調整initial-scale控制縮放比例
vw、vh
1vw = width * 1% 1vh = height * 1% （這里都是視圖寬高）
百分比布局方案
距離寫 百分比 width : 80%;
px （像素 Pixel ）
物理像素：屏幕上的真實可顯示的像素點(每一個點可單獨顯示各種顏色，不可在分割)
邏輯像素：2px ==2邏輯像素長度 ，相當於對物理像素點做了一個抽離、壓縮
設備像素比： 物理像素/邏輯像素
----------------------------------------分隔線------------------------------------------------------------------
瀏覽器根元素/html的font-size 默認是 16px
px 相對邏輯像素長度，寫完了就會固定
由於相對於邏輯分辨率 那邏輯分辨率變化就會引起差錯
em 相對當前dom對象的font-size屬性，如無則尋找最近的有font-size的父元素
依賴當前dom元素或父元素的font-size 一旦需要調整，找父元素的font-size很麻煩
rem 相對於根html（html文件最外層的html標簽）元素的font-size屬性
需考慮整體
----------------------------------------分隔線------------------------------------------------------------------
代碼測試
html {
font-size: 10px;
}
#t1 {
width: 90px;
height: 50px;
background-color: crimson; }
#t2 {
font-size: 5px;
width: 10em;
height: 10em;
background-color: darkred;
margin-left: 2em;}
#t3 {
font-size: 50px;
padding-top: 2rem;
width: 6rem;
height: 6rem;
border: 1px solid black;
}
#t4 {
width: 100%;
height: 100%;
background-color: darkblue;}
</style>
<body>
<div id="t1"></div>
<div id="t2"></div>
<div id="t3">
<div id="t4"></div>
</div>
vw\vh都是相對於 視口
桌面端：瀏覽器的可視區域(winow.innerHeight)
移動端： Viewport中的Layout Viewport
vw：1vw等於視口寬度的1%
vh：1vh等於視口高度的1%
vmin：選取vw和vh中最小的那個
vmax：選取vw和vh中最大的那個
----------------------------------------分隔線------------------------------------------------------------------
代碼測試
#t5 {
width: 10vw;
height: 10vh;
background-color: darkslateblue;}
#t6 {
width: 10vmax;
height: 10vmin;
background-color: darkturquoise;}
<div id="t5"></div>
<div id="t6"></div>
<script>
console.log(window.innerHeight);
</script>