rem適配方案
1. 讓一些不能等比自適應的元素， 達到當設備尺寸發生改變的時候，等比例適配當前設備。
2. 使用媒體查詢根據不同設備按比例設置html的字體大小，然後頁面元素使用rem做尺寸單位，當HTML字體大小變化
元素尺寸也會發生變化，從而達到等比縮放的適配。
1. rem實際開發適配方案
1. 按照設計與設備寬度的比例，動態計算並設置html根標籤的font-size 大小； （媒體查詢）
2. CSS中，設計稿元素的寬、高、相對位置等取值，按照同等比例換算爲rem爲單位的值；
2. rem 適配方案技術使用（市場主流）
| 技術方案1 | 技術方案2（推薦） |
|---|---|
| less | flexible.js |
| 媒體查詢 | rem |
| rem |
總結：
1. 兩種方案現在都存在。
2. 方案2 更簡單， 現階段大家無需瞭解裏面的js代碼。
3. rem實際開發適配方案1
rem + 媒體查詢 + less技術
1. 設計稿常見尺寸寬度
| 設備 | 常見寬度 |
|---|---|
| iPhone 4.5 | 640px |
| iPhone 678 | 750px |
| Android | 常見 320px,360px,375px,384px,400px,414px,500px,720px, 大部分4.7~5寸的安卓設備爲720px |
一般情況下，我們以一套或兩套效果圖適應大部分的屏幕，放棄極端屏或對其優雅降級，犧牲一些效果
現在基本以750爲準。
2. 動態設置html標籤font-size大小
1.假設設計稿是750px。
2.假設我們把整個屏幕劃分爲15等份（劃分標準不一可以是20份也可以是10等份）。
3.每一份作爲html字體大小， 這裏就是50px。
4.那麼在320px設備的時候，字體大小爲320/15 就是 21.33px。
5. 用我們頁面元素的大小除以不同的html 字體大小會發現他們比例還是相同的 。
6.比如我們以750位標準設計稿。
7. 一個100*100像素的頁面元素在750屏幕下，就是100/50 轉換爲rem 是 2rem*2rem比例是 1比1。
8.320屏幕下，html字體大小爲21.33 則2rem = 42.66px 此時寬和高都是 42.66 但是 寬和高的比例還是1比1。
9.但是已經能實現不同屏幕下 頁面元素盒子等比例縮放的效果 。
3. 元素大小取值方法
1. 最後的公式：頁面元素的rem值 = 頁面元素值（px） / （屏幕寬度 / 劃分的份數）
2. 屏幕寬度/劃分的份數就是HTML font-size 的大小
3. 或者： 頁面元素的rem值 = 頁面元素值(px) / html font-size 字體大小
rem適配方案命令演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
@media screen and (min-width: 320px){
html{
font-size: 21.33px;
}
}
@media screen and (min-width: 750px){
html{
font-size: 50px;
}
}
div{
width: 2rem;
height: 2rem;
background-color: blue;
}
/* 1. 首先我們選一套標準尺寸 750爲準
2. 我們用屏幕尺寸 除以 我們劃分的份數 得到了 html 裏面的文字大小 但是我們知道
不同屏幕下得到的文字大小是不一樣的 */
/* 3. 頁面元素的rem值 = 頁面元素在 750像素的下px值 / html 裏面的文字大小 */
</style>
</head>
<body>
<div></div>
</body>
</html>
移動端web開發之響應式佈局
1.響應式開發原理
就是使用媒體查詢針對不同寬度的設備進行佈局和樣式的設置，從而適配不同設備的目的。
| 設備劃分 | 尺寸區間 |
|---|---|
| 超小屏幕（手機） | < 768px |
| 小屏設備 （平板） | > = 768px ~ < 992px |
| 中等屏幕（桌面顯示器） | > = 992px ~ < 1200px |
| 寬屏設備（大桌顯示器） | > = 1200px |
命令演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
height: 150px;
background-color: blue;
margin: 0 auto;
}
/* 1. 超小屏幕下 小於 768 佈局容器的寬度爲 100% */
@media screen and (max-width: 767px){
.container{
width: 100%;
}
}
/* 2. 小屏幕下 大於等於768 佈局容器改爲 750px */
@media screen and (min-width: 768px){
.container{
width: 750px;
}
}
/* 3. 中等屏幕下 大於等於 992px 佈局容器修改爲 970px */
@media screen and (min-width: 992px){
.container{
width: 970px;
}
}
/* 4. 大屏幕下 大於等於1200 佈局容器修改爲 1170 */
@media screen and (min-width: 1200px){
.container{
width: 1170px;
}
}
</style>
</head>
<body>
<!-- 響應式開發裏面，首先需要一個佈局容器 -->
<div class="container"></div>
</body>
</html>
網頁顯示：
2. 響應式佈局容器
響應時需要一個父級作爲佈局容器，來配合子級元素來實現變化效果。
原理就是在不同屏幕下，通過媒體查詢來改變這個佈局容器的大小，在改變裏面子元素的排列方式和
大小，從而實現不同屏幕下，看到不同的頁面佈局和樣式變化。
平時我們的響應式尺寸劃分
超小屏幕（手機，小於768px）：設置寬度爲100%
小屏幕（平板，大於等於768px）：設置寬度爲750px
中等屏幕（桌面顯示器，大於等於992px）：寬度設置爲970px
大屏幕（大桌面顯示器，大於等於1200px）：寬度設置爲1170px
案例：需求分析
1. 當我們屏幕大於等於768像素，我們給佈局容器container寬度爲750px。
2. container裏面包含8個小li盒子的寬度定爲 93.75px （750 / 8）， 高度爲30px，浮動一行顯示。
3. 當我們屏幕縮放，寬度小於768像素的時候，container盒子寬度修改爲100%寬度。
4. 此時裏面的8個小li，寬度修改爲33.33%， 這樣一行就只能顯示3個小li，剩餘下行顯示。
案例導航欄命令演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.container{
width: 750px;
margin: 0 auto;
}
.container ul li{
float: left;
width: 93.75px;
height: 30px;
background-color:deepskyblue ;
}
@media screen and (max-width: 767px){
.container{
width: 100%;
}
.container ul li{
width: 33.33;
}
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>導航欄</li>
<li>導航欄</li>
<li>導航欄</li>
<li>導航欄</li>
<li>導航欄</li>
<li>導航欄</li>
<li>導航欄</li>
<li>導航欄</li>
</ul>
</div>
</body>
</html>
