移動端是怎麼做適配的？

這裡介紹個方案包含5個點：1、meta viewport；2、媒體查詢；3、動態rem方案；4、對rem微調；5、其他細節補充。

一、meta viewport

在head標籤內部加上這段代碼

<meta name="viewport" content="width_=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

該meta標籤的作用是讓當前viewport的寬度等於設備的寬度，同時不允許用戶手動縮放。也許允不允許用戶縮放不同的網站有不同的要求，但讓viewport的寬度等於設備的寬度。

width_=device-width: 讓當前viewport寬度等於設備的寬度user-scalable=no: 禁止用戶縮放initial-scale=1.0: 設置頁面的初始縮放值為不縮放maximum-scale=1.0: 允許用戶的最大縮放值為1.0minimum-scale=1.0: 允許用戶的最小縮放值為1.0

二、媒體查詢（響應式）

格式一：

@media （）and（）{}//滿足（）里的條件，就執行大括弧里css的樣式

舉例：

<style>@media (max-width:320px){ body{ background:red; }}@media (min-width:321px) and (max-width:320px){ body{ background:orange; }}@media (min-width:376px) and (max-width:425px){ body{ background:green; }}@media (min-width:426px) and (max-width:768px){ body{ background:blue; }}@media (min-width:769px){ body{ background:grey; }} </style>

格式二並舉例：

<link rel="stylesheet" href="style.css"media="(max-width:320px)">

注意點：

1、link標籤會下載好，但是是否生效取決於media的條件；

2、有PC端經驗，就有移動端經驗，只是多了一個media查詢；

3、通過添加多個css樣式來滿足不同的屏幕寬度；

4、響應式不怎麼實用，主要用來面試吧~

三、動態rem方案

1rem等於根元素html的font-size的值，那麼可以調整根元素的font-size值來調整頁面縮放後的各個元素的尺寸和定位。

在script標籤加入這段代碼：

<script> var pageWidth=window.innerWidth //獲取屏幕寬度 document.documentElement.fontSize = window.innerWidth / 10 + px</script>

此處，fontSizede的值為屏幕寬的十分之一，那麼在寫CSS的時候可以這樣寫：

.xxx{ width:0.4rem; height:0.2rem; margin:0.05rem 0.05rem; float:left; }

用sass將px轉化為rem：

@function px( $px ){ @return $px/$designWidth*10 + rem;}$designWidth: 320px; 那麼1rem=32px

四、對動態rem進行微調

1、rem都是小數很不方便。所以讓 html 的 font-size 的尺寸等於 window.innerWidth/10；

2、瀏覽器默認可設置的最小字體大小為12px，瀏覽器默認可設置的最小字體大小為12px，瀏覽器默認可設置的最小字體大小為12px；

3、在精細的地方，就直接寫像素，混用px rem em

• 比如border:1px solid red;
• 比如頁面字體的大小就直接寫font-size:16px

五、其他補充

1、px em rem vh vw的區別

px：表示像素em：一個字的高度 //1em == 自己font-size的值rem：root em // 根元素html的font-sizevh：viewport height 視口高度=100vhvw：viewport width 視口寬度=100vw

2、body默認字體為16px，其中chrome默認可設置的最小字體大小為12px，更改body的font-size是rem是不會變的，更改的必須是html的font-size。

3、百分比布局和整體縮放布局的區別

百分比布局：無法讓高度跟著屏幕寬度改變而進行有比例的改變，高度和寬度無法做任何的配合；

整體縮放布局：一切單位以寬度為基準，就能完美還原設稿。