前端技術四移動端適配

通過**查詢可以檢測當前網頁執行在什麼終端，可以有機會實現網頁適應不同終端的展示風格。

關鍵字將**型別或多個**特性連線到一起做為**查詢的條件。

引入方式

1.link標籤引入

2.css方式

@media only screen and (max-width: 640px) 
/* 其它任意樣式表 */
}123456

常用特性

width / height完全等於視口

max-width / max-height 小於等於layout viewport

min-width / min-height 大於等於layout viewport

device-width / device-height 完全等於ideal viewport

orientation: portrait | landscape 肖像/全景模式

rem是相對長度單位，可以做到一樣的取值，在不同尺寸的螢幕上的大小按比例縮放。

rem的定義：rem（font size of the root element）是相對於根元素（即html元素）font-size計算值的倍數。

例如html標籤設定font-size:16px，同時div設定width:1.2rem。那麼這個div的寬度就是1.2rem=16px*1.2=19.2px。

因此這種方法的適配原理是：根據不同螢幕的寬度，以相同的比例動態修改html的font-size適配，並將px替換成rem，它可以很好的根據根元素的字型大小來進行變化，從而達到各種螢幕基本一直的效果體驗。

適用場景

rem+js是寬度自適應，無法做到高度自適應，所以那些對高度要求很高的rem+js無法實現。改變瀏覽器寬度會發現，頁面所有元素的高寬都等比例縮放，也就是大螢幕下導航是橫的，小螢幕下還是橫的只不過變小了。

優點：理想狀態是所有螢幕的高寬比和最初的設計高寬比一樣，或者相差不多，完美適應。

缺點：碰到重視高度的設計，或者重視元素間間距的設計，就有一定的劣勢。

計算過程

1 螢幕寬為 clientwidth(px)。設計稿寬度為 750 (px), 假設 n = clientwidth(px)/750(px);單位化簡===> n= clientwidth/750 ;

2 將 html的 font-size: n(px);

3 則有 n(px) = 1(rem) ,因為1rem為根節點(html節點)字型的大小一倍;

4 假設有乙個 div ,在設計稿測量的寬度為 rulew(px);

5 則需要寫入的寬度 width: 設為 w (單位暫不確定)

6 則有 w/clientwidth(px) = rulew(px)/750(px) 單位化簡===> w/clientwidth(px) = rulew/750

7 化簡 w = (clientwidth/750)rulew(px) 化簡==> w = nrulew(px) 轉換 w = rulew * n(px)

8 最後得出 w = rulew * 1(rem) = rulew(rem);

總之，當設定html的font-szie為 (螢幕寬度/設計稿寬度) 的px 時，直接將值換為 rem單位寫到**裡面即可

前端技術 四 移動端適配