目錄
## 一、媒體查詢
- css2媒體類型：
all ： 所有
screen : 屏幕
print ：打印機
...
- css2媒體類型區分語法(不推薦)：
```
<link rel="stylesheet" href="./css/screen.css" media="screen">
<link rel="stylesheet" href="./css/print.css" media="print">
```
- css3媒體查詢：
> 參數說明：
width:視口寬度等於某個值
device-width: 設備的寬度(設置了viewport , 等同於第一個參數)
min-width: 視口的最小值，規定大於某個值的範圍
max-width: 視口的最大值，規定小於某個值的範圍
```
/* 視口寬度（等同於設備寬度）等於320px */
@media screen and (width:320px){
.box{
background-color: yellow;
}
}
/* 視口寬度大於等於414px */
@media screen and (min-width: 414px){
.box{
border: 2px solid black;
}
}
/* 視口寬度小於等於768px */
@media screen and (max-width: 768px){
.box{
border-right: 10px solid limegreen;
}
}
/* 視口寬度大於等於360px並且小於等於414px */
@media screen and (min-width: 360px) and (max-width: 414px){
.box{
border-bottom: 10px solid hotpink;
}
}
```
## 二、媒體查詢 + rem
```
html{
font-size: 100px;
}
@media screen and (width:375px){
html{
font-size: 50px; /* 375*100/750 */
}
}
@media screen and (width:320px){
html{
font-size: 42.66666px; /* 320*100/750*/
}
}
@media screen and (width:360px){
html{
font-size: 48px; /* 360*100/750 */
}
}
```
## 三、vw適配(瞭解)
- 1、vw單位
vw 即Viewport's width的簡寫，是css3規範中的視口單位，相對於視口的寬度，視口被均分爲100單位的vw。
相關單位瞭解：
除此之外還有vh單位 即Viewport's height，相對於視口的高度，視口高度被均分爲100單位的vh。
vmax相對於視口的寬度或高度中較大的那個。其中最大的那個被均分爲100單位的vmax。
vmin相對於視口的寬度或高度中較小的那個。其中最小的那個被均分爲100單位的vmin。
- 2、vw單位佈局
確定基準值以常見的750px寬度的設計稿爲例，那麼根據vw單位的原理100vw = 750px，即1vw = 7.5px，我們可以根據設計圖中的px直接轉換成對應的vw值進行佈局，當然也可以直接寫px，藉助插件插件自動計算成需要的vw。因爲vw是相對於視口寬度的單位，當視口寬度發生變化，則元素大小隨即發生變化。
確定基準值以常見的750px寬度的設計稿爲例，那麼根據vw單位的原理100vw = 750px，即1vw = 7.5px，我們可以根據設計圖中的px直接轉換成對應的vw值進行佈局，當然也可以直接寫px，藉助插件插件自動計算成需要的vw。因爲vw是相對於視口寬度的單位，當視口寬度發生變化，則元素大小隨即發生變化。
- 3、rem+vw
確定基準值以常見的750px寬度的設計稿爲例，結合以上，那麼根據vw單位和rem的單位原理（參照本章節之前內容在此不在綴述）。
在750px的設計稿下，如果使用vw單位換算，可以理解爲100vw,對應750px,那麼1px就是0.1333333vw。
如果使用rem，預設1rem = 100px,通過上面的計算結果1px是0.13333333vw,那麼100px就是13.333333vw了。由此實現單位rem與vw之間的換算。
設置html{font-size:13.33333333vw}
然後我們就可以在佈局寫rem單位了, 由於倍率是100,除以100,直接小數點向左移動2位,1rem是100px,那麼10px就是0.1rem，不需要藉助插件轉換計算也可以直觀的進行佈局了。
## 四、移動端特殊處理
> 1、小字體處理
不同瀏覽器的最小字體不同，有的是10px，有的是12px。
解決辦法：設置字體時，不要小於12px,如果一定要小於12px，使用transform:sacle()進行縮放。
```
@media screen and (max-width:320px){
.box p{
width: 2.5rem;
transform-origin: left center;
transform: scale(0.95);
}
}
```
> 2、動畫定義3D啓用硬件加速
element {
-webkit-transform:translate3d(0,0,0)
transform: translate3d(0,0,0);
}
注意：3D變形會消耗更多的內存與功耗。
> 3、圓角bug：部分Android手機圓角失效
element{
background-clip: padding-box;
}
> 4、Input 的placeholder會出現文本位置偏上的情況
在IOS和Android中顯示不同。解決方法是：在保證input輸入文本垂直居中的條件下，給placehoder設置padding-top，不要設置行高。
## 五、響應式
> responseive design : 響應式設計理念是，網站佈局可以根據用戶的設備環境不同實現一些變化的效果，從而達到更好的用戶體驗。
> 響應式設計適用於一些展示性的企業站（官網）、個人博客、後臺管理系統。
```
實現響應式網站核心技術：
- 1、媒體查詢
- 2、彈性盒（多列）
- 3、百分比佈局
- 4、響應式圖片
- 5、響應式字體
```
### 響應式優缺點
> 網頁可以根據屏幕尺寸不同實現不同的佈局，從而達到良好的用戶體驗
> 特點：一套代碼兼容多個終端
```
- 優點：
- 1. 減少工作量：設計、代碼只需要一份，多出來的工作量是css特殊樣式處理、js腳本、省時省人力
- 2. 每種設備上都可以得到正確的顯示
- 缺點：
- 1. 設計比較難精準的定位和控制
- 2. 會加載更多樣式和腳本
- 3. 兼容性不好
```
## 六、用媒體查詢對屏幕進行分類
```
超小屏幕 手機 小於768px
小屏幕 pad 大於768px && 小於992px
中等屏幕 小型電腦 大於992px && 小於1200px
大屏幕 大型電腦 大於1200px
```
- 1、移動端優先（小屏幕優先）
```
/* 超小屏幕：移動端優先，先寫移動端的佈局*/
/* 小屏幕設備*/
@media screen and (min-width:768px){
}
/* 中等屏幕*/
@media screen and (min-width:992px){
}
/* 大屏幕*/
@media screen and (min-width:1200px){
}
```
2、pc端優先（大屏幕優先）
```
/* 大屏幕 */
/* 中等屏幕*/
@media screen and (max-width:1199px){
}
/* 小屏幕 */
@media screen and (max-width:991px){
}
/* 超小屏幕*/
@media screen and (max-width:767px){
}
```
## 七、百分比佈局
> 用媒體查詢結合百分比佈局，實現不同屏幕顯示不同佈局
```
<!-- 大屏幕：一行5個塊，每個塊20% -->
ul li{
float: left;
width: 20%;
}
<!-- 中等屏幕：一行4個塊，每個塊25% -->
@media screen and (max-width:1199px) {
ul li{
width: 25%;
}
}
<!-- 小屏幕：一行3個塊，每個塊33.33% -->
@media screen and (max-width:991px){
ul li{
width: 33.33%;
}
}
<!-- 超小屏幕：一行2個塊，每個塊50% -->
@media screen and (max-width:767px){
ul li{
width: 50%;
}
}
```
## 八、響應式圖片
- 內容圖片
- 圖片自適應所在的父級容器的尺寸（寬度相同）
```
img{
width:100%;
display:block;
}
```
- 圖片自適應所在的父級容器的尺寸， 放大到圖片的原始尺寸就不會再變大
```
img{
max-width:100%;
display:block;
margin:0 auto;
}
```
- 背景圖片
- 通過background-size屬性實現背景圖片的響應式效果（cover/contain），具體取值根據情況而定
## 九、響應式字體
```
html{
font-size:12px;
}
body{
font-size:2rem; /* 大屏幕盒和中等屏幕 默認字體 24px */
}
/* 小屏幕默認字體 18px*/
@media screen and (max-width:991px){
body{
font-size: 1.5rem;
}
}
/* 超小屏幕默認字體 12px*/
@media screen and (max-width:767px){
body{
font-size: 1rem;
}
}
```