好好學習，天天向上
本文已收錄至我的Github倉庫DayDayUP：github.com/RobodLee/DayDayUP，歡迎Star
連結：https://blog.csdn.net/weixin_43461520/article/details/113785278
視口
視口就是瀏覽器顯示頁面內容的螢幕區域。視口分為佈局視口、視覺視口和理想視口。
佈局視口 layout viewport
佈局視口是移動裝置的瀏覽器預設設定的一個視口，用於解決早期的PC端頁面在手機上顯示的問題，一般這個視口預設的解析度是980px，這種情況下元素顯示得都比較小，需要手動縮放網頁才能看清。
視覺視口 visual viewport
視覺視口指的是使用者正在看到的網頁的區域，可以通過縮放去操作視覺視口，但不會影響到佈局視口，佈局視口仍保持原來的寬度。
理想視口 ideal viewport
前兩種視口的閱讀體驗都不太好，仍然需要手動縮放網頁才能將頁面內容看清，而理想視口則是最理想的視口尺寸，簡單的說就是裝置有多寬，佈局的視口就有多寬，小米商城京東等網站的手機網頁版都是理想視口，我們不需要縮放視窗就可以將頁面內容看清。
mate視口標籤
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0,minimal-ui">
其中，name=“viewport”表示這是一個視口標籤，content用於宣告某些屬性，常用屬性有?
| 屬性 | 說明 |
|---|---|
| width | 用於設定寬度，device-width |
| initial-scale | 初始化縮放比，大於0的數字 |
| maximum-scale | 最大縮放比，大於0的數字 |
| minimum-scale | 最小縮放比，大於0的數字 |
| user-scalable | 使用者是否可以縮放，yes或no（1或0） |
| minimal-ui | 在網頁載入是隱藏頂部的位址列和底部的導航欄 |
二倍圖
物理畫素＆物理畫素比
物理畫素就是所謂的解析度，比如解析度是1920*1080的螢幕，那麼螢幕橫向是1080個物理畫素，縱向就是1920個物理畫素。但有時候程式碼中寫的是1px，在手機螢幕上顯示不一定就是一個物理畫素，比如視網膜螢幕，可以將更多的物理畫素點壓縮至一塊螢幕裡，從而達到更高的解析度。
從上圖中可以看出，原本一個畫素，在顯示的時候卻用了兩個物理畫素，這就是物理畫素比（實際顯示的物理畫素 / 指定的畫素大小，上圖中物理畫素比就是4/2=2）
多倍圖
比如一張50px * 50px的圖片，在視網膜螢幕中開啟，按照上圖中的換算關係，就會變成原來的兩倍，也就是100px * 100px，肯定會造成圖片模糊。所以要想解決這個問題，可以先準備一張100px * 100px的圖片，然後指定寬高為原來的一半，就變成了50px * 50px，在螢幕中顯示的時候，又會擴大為之前的兩倍，又恢復成了100px * 100px，這樣圖片就不會模糊了。
img {
width: 50px;
height: 50px;
}
背景縮放 background-size
不光是普通的圖片可以縮放，背景圖片也可以縮放，使用background-size屬性就可以將背景圖片縮放了。
/* 語法： */
background-size: 背景圖片寬度 背景圖片高度;
/* 可以只寫一個引數，一個參數列示的是寬度，高度省略了，會等比例縮放? */
background-size: 背景圖片寬度;
/* 引數百分比也是ok的，表示父盒子的百分之多少，同樣，百分比也可以指定一個或兩個? */
background-size: 66% 50%; / background-size: 80%;
/* cover表示背景圖片寬度和高度等比例擴充套件至足夠大，完全覆蓋背景區域，可能會導致一部分圖片內容丟失? */
background-size: cover;
/* contain表示寬度和高度進行等比例縮放，當寬度或者高度中的一個佔滿整個盒子的時候就不再拉伸了? */
background-size: contain;
看一下cover和contain的區別?
<head>
<style>
div {
width: 300px;
height: 400px;
border: 5px solid red;
background: url(./images/robod.png) no-repeat;
background-size: contain;
}
</style>
</head>
<body>
<div></div>
</body>
佈局
流式佈局
流式佈局很簡單，就是百分比佈局，也稱非固定畫素佈局，簡單來說就是將盒子的寬度設定成百分比，這樣盒子的寬度就會根據螢幕的寬度來進行伸縮，不受固定畫素的限制，內容向兩側填充。
<head>
<style>
div {
width: 80%; /* 將寬度指定為父盒子的80% */
height: 50px; /* 高度還是指定具體的px */
background-color: skyblue;
margin: 0 auto; /* 盒子始終居中對齊 */
}
</style>
</head>
<body>
<div></div>
</body>
flex 彈性佈局
flex用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為flex佈局，當父盒子被指定為flex佈局後，子元素的float、clear和vertical-align屬性將失效。採用flex佈局的元素被稱為flex容器，它的所有子元素自動成為容器成員，稱為flex專案。
flex 佈局就是通過給父盒子新增flex屬性，來控制子元素的位置和排列方式
flex 佈局父項常見屬性
flex-direction（設定主軸的方向）
在 flex 佈局中，分為主軸和側軸兩個方向，又被稱作行和列，x軸和y軸。預設的主軸是x軸，預設的側軸是y軸。
主軸和側軸是會變化的，通過flex-direction屬性即可設定哪個是主軸以及主軸方向，剩下的就是側軸，子元素是跟著主軸的方向排列的。
| 屬性值 | 說明 |
|---|---|
| row | x軸為主軸，子元素從左向右排列，預設值 |
| row-reverse | x軸為主軸，子元素從右向左排列 |
| column | y軸為主軸，子元素從上到下排列 |
| column-reverse | y軸為主軸，子元素從下到上排列 |
<head>
<style>
.father {
display: flex; /* 使用flex佈局 */
width: 500px;
height: 500px;
background-color: tomato;
/* row、row-reverse、column、column-reverse */
flex-direction: column-reverse;
}
.son {
width: 200px;
height: 200px;
margin: 10px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="father">
<div class="son">11111微信公眾號：Robod</div>
<div class="son">22222微信公眾號：Robod</div>
</div>
</body>
justify-content（設定主軸上的子元素排列方式）
在確定好主軸後，就可以使用justify-content屬性去定義子元素在主軸上的對齊方式。
| 屬性值 | 說明 |
|---|---|
| flex-start | 預設值，從頭部開始（如果主軸是x軸，則從左到右） |
| felx-end | 從尾部開始排列 |
| center | 在主軸居中對齊（如果主軸是x軸，則水平居中） |
| space-around | 平分剩餘空間 |
| space-between | 先兩邊貼邊，再平分剩餘空間 |
<head>
<style>
.box {
width: 500px;
height: 200px;
display: flex;
/* flex-start、flex-end、center、space-around、space-between */
justify-content: flex-start;
background-color: aquamarine;
}
.box div {
width: 100px;
height: 100px;
margin: 10px;
background-color: blanchedalmond;
}
</style>
</head>
<body>
<div class="box">
<div>Robod111</div>
<div>Robod222</div>
<div>Robod333</div>
</div>
</body>
flex-wrap（設定子元素是否換行）
flex佈局中，預設情況下所有的子元素都排在一條線上，如果一條線上塞不下，就會縮減子元素的寬度，強制塞進一條線中，如果想控制是否換行，可以通過flex-wrap屬性來設定nowrap(預設值，不換行)，wrap(換行)。
<head>
<style>
.box {
width: 700px;
height: 300px;
display: flex;
flex-wrap: nowrap; /* nowrap、wrap */
background-color: aquamarine;
}
.box div {
width: 300px;
height: 100px;
border: 1px solid red;
background-color: blanchedalmond;
}
</style>
</head>
<body>
<div class="box">
<div>Robod111</div>
<div>Robod222</div>
<div>Robod333</div>
</div>
</body>
align-items（設定側軸上的子元素的排列方式，單行）
該屬性是控制子項在側軸上的排列方式，當子元素都在一行(或一列)上的時候使用。
| 屬性值 | 說明 |
|---|---|
| flex-start | 從上到下 |
| flex-end | 從下到上 |
| center | 擠在一起居中（垂直居中） |
| stretch | 拉伸，預設值，子盒子不設定height時，高度和父盒子一致 |
<!-- 現在主軸是x軸，y軸是側軸-->
<head>
<style>
.box {
width: 400px;
height: 100px;
display: flex;
/* flex-start、flex-end、center、stretch */
align-items: stretch;
background-color: aquamarine;
}
.box div {
width: 100px;
border: 1px solid red;
background-color: blanchedalmond;
}
</style>
</head>
<body>
<div class="box">
<div>Robod111</div>
<div>Robod222</div>
<div>Robod333</div>
</div>
</body>
align-content（設定側軸上的子元素的排列方式，多行）
當子元素出現換行的情況時，使用align-content屬性設定子元素的對齊方式，在單行情況下沒有效果。
| 屬性值 | 說明 |
|---|---|
| flex-start | 在側軸的頭部開始排列，預設值 |
| flex-end | 在側軸的尾部開始排列 |
| center | 在側軸中間顯示 |
| space-around | 子元素在側軸平分剩餘空間 |
| space-between | 子元素在側軸先分佈在兩頭，再平分剩餘空間 |
| stretch | 子元素未指定height屬性時平分父元素高度 |
<head>
<style>
.box {
width: 150px;
height: 400px;
display: flex;
flex-wrap: wrap; /* 設定子元素換行顯示 */
/* flex-start、flex-end、center、space-around、space-between、stretch*/
align-content: stretch;
background-color: aquamarine;
}
.box div {
width: 100px;
/* height: 100px; */
border: 1px solid red;
background-color: blanchedalmond;
}
</style>
</head>
<body>
<div class="box">
<div>Robod111</div>
<div>Robod222</div>
<div>Robod333</div>
</div>
</body>
flex-flow
flex-flow屬性是flex-direction和flex-wrap屬性的複合屬性。
flex-flow: row wrap;
flex 佈局子項常見屬性
flex
flex屬性用於分配父盒子剩餘的空間，flex來表示佔的份數，也可以寫百分比。
<head>
<style>
.box {
display: flex;
width: 100%;
height: 100px;
background-color: skyblue;
}
.box div {
height: 100px;
}
.box div:nth-child(1) {
background-color: red;
flex: 3;
}
.box div:nth-child(2) {
background-color: green;
flex: 1;
}
.box div:nth-child(3) {
background-color: blue;
width: 100px;
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
</body>
上面這個例子中，第三個藍色盒子佔了100px，紅色和綠色盒子分配剩下的空間，紅色的佔2/3，綠色的佔1/3，而且會根據父盒子寬度的調整去動態調整盒子的寬度。
align-self
這個屬性可以用來設定子元素自身在側軸上的排列方式，預設值為auto，表示繼承父元素的align-items屬性
order
如果想更改兩個元素的排列順序，可以使用order屬性，數值越小，排列越靠前，預設為0。
<head>
<style>
.box {
display: flex;
width: 200px;
height: 200px;
background-color: skyblue;
}
.box div {
width: 50px;
height: 50px;
margin: 10px;
background-color: burlywood;
}
.box div:nth-child(2){
align-self: flex-end;
}
.box div:nth-child(3) {
order: -1;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
rem 適配佈局
上面這張圖是蘇寧移動端的首頁，可以看到，網頁中元素以及文字的大小是根據視窗寬度動態進行調整的，要想實現這種效果，可以使用rem + 媒體查詢。
rem 單位
在介紹rem之前，先來介紹一下em，em指的是父元素字型大小，比如div裡面有個span，div中的font-size是20px，那麼在span中，1em=20px。同樣的，rem也是一個相對單位，但是它指的是html根標籤的字型大小，比如html標籤中font-size為50px，那麼在整個html程式碼裡1rem=50px。所以現在我們只需要將所有的文字還有元素寬高的單位修改為rem，就可以通過修改html標籤中的文字大小來調整整個頁面中所有元素的大小了。
媒體查詢（Media Query）
僅有rem單位還沒辦法實現前面提到的效果，現在還需要去實現調整視窗大小的時候html標籤中的font-size能夠隨之變化才可以達到我們想要的效果，通過媒體查詢即可實現該功能。媒體查詢是CSS3新語法，可以對不同的媒體型別定義不同的樣式，語法如下?
@media mediatype and|not|only (media feature) {
CSS樣式;
}
其中，mediatype是媒體型別，常用的有all(用於所有裝置)，print(用於印表機和列印預覽)和screen(用於電腦螢幕，平板電腦，智慧手機等)三種。
mediatype後面跟著的就是關鍵字，同樣也有三個，and 指的是可以將多個媒體特性連線到一起，not 是排除某個媒體型別，最後一個only用於指定某個特定的媒體型別。
最後一個用小括號括起來的是媒體特性，根據不同媒體型別的媒體特性設定不同的展示風格，比如width、min-width、max-width等， 還有很多，可以參考菜鳥教程，
<head>
<style>
@media screen and (min-width: 600px) {
html {
font-size: 20px;
background-color: skyblue;
}
}
@media screen and (max-width: 599px) {
html {
background-color:springgreen;
font-size: 10px;
}
}
div {
font-size: 2rem;
}
</style>
</head>
<body>
<div>
微信公眾號：Robod
</div>
</body>
上面的例子中，當螢幕寬度小於600px時，1rem=10px，文字大小是2rem=40px，當螢幕寬度為600~800px時，1rem=20px，文字大小就變成了2rem=40px，不過在書寫的時候要注意書寫的邏輯，不然有可能由於CSS層疊性的問題導致樣式不生效。
媒體查詢不僅可以實現頁面元素的動態變化，還可以實現根據裝置尺寸引入不同的css檔案，當樣式比較多的時候，可以針對不同的媒體使用不同的css檔案，語法如下?
<link rel="stylesheet" media="mediatype and|not|only (media fuature)" href="xxx.css">
這樣當符合media屬性中的條件時，就會引入該CSS檔案。
響應式佈局
前面幾種佈局方式都是專門為了為了移動端去製作一個佈局檔案，而響應式佈局可以只需要開發一套即可，它可以相容不同尺寸的螢幕。
響應式開發原理
首先響應式佈局需要一個父級作為佈局容器，用來配合子集元素去實現變化效果，原理就是在不同螢幕下通過媒體查詢來改變這個佈局容器的大小，再改變裡面子元素的排列方式和大小，從而實現不同螢幕下看到不同的頁面佈局和樣式變化。
通常的尺寸劃分與寬度設定?
| 裝置劃分 | 尺寸與寬度設定 |
|---|---|
| 超小螢幕（手機） | <768px；寬度設為100% |
| 小屏裝置（平板） | >=768px，<992px；寬度設為750px |
| 中等裝置（桌面顯示器） | >=992px，<1200px；寬度設為970px |
| 寬屏裝置（大桌面顯示器） | >=1200px；寬度設為1170px |
<head>
<style>
.container {
width: 750px;
margin: 0 auto;
}
.container ul li {
float: left;
width: 25%;
height: 30px;
background-color: aqua;
list-style: none;
}
@media screen and (max-width: 768px) {
.container {
width: 100%;
}
.container ul li {
width: 50%;
background-color: skyblue;
}
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>微信公眾號</li>
<li>Robod</li>
<li>微信公眾號</li>
<li>Robod</li>
</ul>
</div>
</body>
在?這個例子中，當視窗寬度大於768px時，讓4個 li 浮動在一行顯示，每個 li 的寬度為ul的25%，當視窗寬度小於768px時，通過媒體查詢修改 li 元素的樣式，一行顯示兩個。所以，響應式佈局的優點就在於可以使用一套CSS程式碼實現不同螢幕下的佈局，不過缺點就是會導致整個佈局檔案比較臃腫。
背景線性漸變色
在某些網站中，可以看到一些漸變色的效果，那麼漸變色也是可以通過CSS來實現的。
/* 第一個引數是起始方向，不寫預設是top，跟一個表示某一邊，兩個表示某個角，比如左下角，就寫left bottom（中間用空格隔開，不是逗號）;
後面的顏色可以跟多個，中間用逗號隔開 */
background: -webkit-linear-gradient(起始方向, 顏色1, 顏色2...);
需要注意的是，背景漸變的相容性不是很好，所以必須新增私有字首。
<head>
<style>
div {
width: 200px;
height: 100px;
background: -webkit-linear-gradient(left bottom,red,green,blue);
}
</style>
</head>
<body>
<div></div>
</body>
總結
現在正好放假了，所以抽空學習了一下移動端的佈局開發，然後將看的內容總結成了這一篇文章，整個HTML+CSS的部分到這裡也就結束了，接下來就要學習JavaScript了。文中肯定有很多疏漏的地方，歡迎在評論區交流。
明天就大年三十了，祝各位小夥伴們新年快樂！
碼字不易，可以的話，給我來個
點贊，收藏，關注如果你喜歡我的文章，歡迎關注微信公眾號 『 R o b o d 』
本文已收錄至我的Github倉庫DayDayUP：github.com/RobodLee/DayDayUP，歡迎Star
連結：https://blog.csdn.net/weixin_43461520/article/details/113785278
