手摸手帶你學移動端WEB開發(fā)
時間：2023-07-05 13:36:01 | 來源：網(wǎng)站運營
時間：2023-07-05 13:36:01 來源：網(wǎng)站運營
手摸手帶你學移動端WEB開發(fā)：
? 「好好學習，天天向上」
本文已收錄至我的Github倉庫**DayDayUP**：github.com/RobodLee/DayDayUP，歡迎Star
ef="https://blog.csdn.net/weixin_43461520/article/details/113785278">?????轉載請注明出處！?????
鏈接：https://blog.csdn.net/weixin_43461520/article/details/113785278
?????**轉載請注明出處！**?????
?
視口
視口就是瀏覽器顯示頁面內(nèi)容的屏幕區(qū)域。視口分為
「布局視口」、
「視覺視口」和
「理想視口」。
布局視口 layout viewport
布局視口是移動設備的瀏覽器默認設置的一個視口，用于解決早期的PC端頁面在手機上顯示的問題，一般這個視口默認的分辨率是
「980px」，這種情況下元素顯示得都比較小，需要手動縮放網(wǎng)頁才能看清。
視覺視口 visual viewport
視覺視口指的是用戶
「正在看到」的
「網(wǎng)頁的區(qū)域」，可以通過縮放去操作視覺視口，但不會影響到布局視口，布局視口仍保持原來的寬度。
理想視口 ideal viewport
前兩種視口的閱讀體驗都不太好，仍然需要手動縮放網(wǎng)頁才能將頁面內(nèi)容看清，而理想視口則是最理想的視口尺寸，簡單的說就是設備有多寬，布局的視口就有多寬，小米商城京東等網(wǎng)站的手機網(wǎng)頁版都是理想視口，我們不需要縮放窗口就可以將頁面內(nèi)容看清。
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的數(shù)字 |
| 「maximum-scale」 | 最大縮放比，大于0的數(shù)字 |
| 「minimum-scale」 | 最小縮放比，大于0的數(shù)字 |
| 「user-scalable」 | 用戶是否可以縮放，「yes」或「no」（1或0） |
| 「minimal-ui」 | 在網(wǎng)頁加載是隱藏頂部的地址欄和底部的導航欄 |
二倍圖
物理像素＆物理像素比
物理像素就是所謂的分辨率，比如分辨率是1920*1080的屏幕，那么屏幕橫向是1080個物理像素，縱向就是1920個物理像素。但有時候代碼中寫的是1px，在手機屏幕上顯示不一定就是一個物理像素，比如視網(wǎng)膜屏幕，可以將更多的物理像素點壓縮至一塊屏幕里，從而達到更高的分辨率。
從上圖中可以看出，原本一個像素，在顯示的時候卻用了兩個物理像素，這就是物理像素比（實際顯示的物理像素
「/」 指定的像素大小，上圖中物理像素比就是4/2=2）
多倍圖
比如一張50px * 50px的圖片，在視網(wǎng)膜屏幕中打開，按照上圖中的換算關系，就會變成原來的兩倍，也就是100px * 100px，肯定會造成圖片模糊。所以要想解決這個問題，可以先準備一張100px * 100px的圖片，然后指定寬高為原來的一半，就變成了50px * 50px，在屏幕中顯示的時候，又會擴大為之前的兩倍，又恢復成了100px * 100px，這樣圖片就不會模糊了。
img { width: 50px; height: 50px;}背景縮放 background-size
不光是普通的圖片可以縮放，背景圖片也可以縮放，使用
「background-size」屬性就可以將背景圖片縮放了。
/* 語法： */background-size: 背景圖片寬度 背景圖片高度;/* 可以只寫一個參數(shù)，一個參數(shù)表示的是寬度，高度省略了，會等比例縮放 */background-size: 背景圖片寬度;<br/>/* 參數(shù)百分比也是ok的，表示父盒子的百分之多少，同樣，百分比也可以指定一個或兩個 */background-size: 66% 50%; / background-size: 80%;<br/>/* cover表示背景圖片寬度和高度等比例擴展至足夠大，完全覆蓋背景區(qū)域，可能會導致一部分圖片內(nèi)容丟失 */background-size: cover;<br/>/* contain表示寬度和高度進行等比例縮放，當寬度或者高度中的一個占滿整個盒子的時候就不再拉伸了 */background-size: contain;看一下
「cover」和
「contain」的區(qū)別
<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>布局
流式布局
流式布局很簡單，就是
「百分比布局」，也稱
「非固定像素布局」，簡單來說就是
「將盒子的寬度設置成百分比」，這樣盒子的寬度就會根據(jù)屏幕的寬度來進行伸縮，不受固定像素的限制，內(nèi)容向兩側填充。
<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時，高度和父盒子一致 |
<!-- 現(xiàn)在主軸是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（設置側軸上的子元素的排列方式，多行）
當子元素出現(xiàn)換行的情況時，使用
「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來表示占的
「份數(shù)」，也可以寫
「百分比」。
<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，而且會根據(jù)父盒子寬度的調(diào)整去動態(tài)調(diào)整盒子的寬度。
align-self這個屬性可以用來設置子元素自身在側軸上的排列方式，默認值為auto，表示繼承父元素的
「align-items」屬性
order
如果想更改兩個元素的排列順序，可以使用order屬性，數(shù)值越小，排列越靠前，默認為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 適配布局
上面這張圖是蘇寧移動端的首頁，可以看到，網(wǎng)頁中元素以及文字的大小是根據(jù)窗口寬度動態(tài)進行調(diào)整的，要想實現(xiàn)這種效果，可以使用rem + 媒體查詢。
rem 單位
在介紹rem之前，先來介紹一下
「em」，em指的是父元素字體大小，比如div里面有個span，div中的font-size是20px，那么在span中，1em=20px。同樣的，
「rem」也是一個相對單位，但是它指的是html根標簽的字體大小，比如html標簽中font-size為50px，那么在整個html代碼里1rem=50px。所以現(xiàn)在我們只需要將所有的文字還有元素寬高的單位修改為rem，就可以通過修改html標簽中的文字大小來調(diào)整整個頁面中所有元素的大小了。
媒體查詢（Media Query）
僅有rem單位還沒辦法實現(xiàn)前面提到的效果，現(xiàn)在還需要去實現(xiàn)調(diào)整窗口大小的時候html標簽中的font-size能夠隨之變化才可以達到我們想要的效果，通過媒體查詢即可實現(xiàn)該功能。
「媒體查詢」是CSS3新語法，可以對不同的媒體類型定義不同的樣式，語法如下
@media mediatype and|not|only (media feature) { CSS樣式;}其中，
mediatype是媒體類型，常用的有
「all」(用于所有設備)，
「print」(用于打印機和打印預覽)和
「screen」(用于電腦屏幕，平板電腦，智能手機等)三種。
mediatype后面跟著的就是
關鍵字，同樣也有三個，
「and」 指的是可以將多個媒體特性連接到一起，
「not」 是排除某個媒體類型，最后一個
「only」用于指定某個特定的媒體類型。
最后一個用小括號括起來的是
「媒體特性」，根據(jù)不同媒體類型的媒體特性設置不同的展示風格，比如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層疊性的問題導致樣式不生效。
媒體查詢不僅可以實現(xiàn)頁面元素的動態(tài)變化，還可以實現(xiàn)
「根據(jù)設備尺寸引入不同的css文件」，當樣式比較多的時候，可以針對不同的媒體使用不同的css文件，語法如下
<link rel="stylesheet" media="mediatype and|not|only (media fuature)" href="xxx.css">這樣當符合media屬性中的條件時，就會引入該CSS文件。
響應式布局
前面幾種布局方式都是專門為了為了移動端去制作一個布局文件，而響應式布局可以只需要開發(fā)一套即可，它可以兼容不同尺寸的屏幕。
響應式開發(fā)原理
首先響應式布局需要一個父級作為布局容器，用來配合子集元素去實現(xiàn)變化效果，原理就是在不同屏幕下通過媒體查詢來改變這個布局容器的大小，再改變里面子元素的排列方式和大小，從而實現(xiàn)不同屏幕下看到不同的頁面布局和樣式變化。
通常的尺寸劃分與寬度設置
| 設備劃分 | 尺寸與寬度設置 |
|---|
| 超小屏幕（手機） | <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 元素的樣式，一行顯示兩個。所以，響應式布局的優(yōu)點就在于可以使用一套CSS代碼實現(xiàn)不同屏幕下的布局，不過缺點就是會導致整個布局文件比較臃腫。
背景線性漸變色
在某些網(wǎng)站中，可以看到一些漸變色的效果，那么漸變色也是可以通過CSS來實現(xiàn)的。
/* 第一個參數(shù)是起始方向，不寫默認是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>總結
現(xiàn)在正好放假了，所以抽空學習了一下移動端的布局開發(fā)，然后將看的內(nèi)容總結成了這一篇文章，整個HTML+CSS的部分到這里也就結束了，接下來就要學習JavaScript了。文中肯定有很多疏漏的地方，歡迎在評論區(qū)交流。
明天就大年三十了，祝各位小伙伴們新年快樂！
碼字不易，可以的話，給我來個點贊，收藏，關注
如果你喜歡我的文章，歡迎關注微信公眾號 「『 R o b o d 』」
本文已收錄至我的Github倉庫「DayDayUP」：github.com/RobodLee/DayDayUP，歡迎Star
ef="https://blog.csdn.net/weixin_43461520/article/details/113785278">?????轉載請注明出處！?????
鏈接：https://blog.csdn.net/weixin_43461520/article/details/113785278
?????**轉載請注明出處！**?????
在線咨詢
