| 前言 |
1、視口（viewport）就是瀏覽器顯示頁面內容的屏幕區域。 視口可以分爲佈局視口、視覺視口和理想視口
1.1佈局視口
一般移動設備的瀏覽器都默認設置了一個佈局視口，用於解決早期的PC端頁面在手機上顯示的問題。
iOS, Android基本都將這個視口分辨率設置爲 980px，所以PC上的網頁大多都能在手機上呈現，只不過元素看上去很小，一般默認可以通過手動縮放網頁。
1.2視覺視口
它是用戶正在看到的網站的區域
1.3理想視口
- 設備有多寬，佈局視口就有多寬
- 需要手動添加meta視口標籤通知瀏覽器操作
2、meta視口標籤
2.1語法
<!-- 視口標籤 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
2.2屬性
- 作用：PC端轉換手機端，加上視口標籤後，依據設備自動調節
2.2標準視口標籤的寫法
- 視口寬度和設備保持一致
- 視口的默認縮放比例1.0
- 不允許用戶自行縮放
- 最大允許的縮放比例1.0
- 最小允許的縮放比例1.0
3、物理像素
物理像素，就是常說的分辨率，通過倍圖來解決圖片放大後不清楚地問題
4、背景縮放background-size
- 語法
background-size: 背景圖片寬度 背景圖片高度;
例
div {
width: 500px;
height: 500px;
border: 2px solid red;
background: url(images/dog.jpg)no-repeat;
/*1、 修改圖片寬度，高度 */
background-size: 500px 200px;
/*2、只寫一個參數，那就是寬度，高度省略了，會等比縮放 */
background-size: 500px;
/* 3、裏面的單位可以跟%，相對於父盒子來說的 */
background-size: 50%;
/* 4、cover要完全覆蓋div盒子 */
background-size: cover;
/* 5、contain 高度和寬度等比例拉伸，當高度或者高度鋪滿div盒子，就不再拉伸了，可能有部分空白區域 */
background-size: contain;
}
<body>
<div></div>
</body>
5、設置漸變色
/* 設置成漸變色，必須加瀏覽器私有前綴：-webkit */
background: -webkit-linear-gradient(left, red, blue)
效果圖
完！歡迎評論區留言