重温前端基础（二） 移动WEB开发
目錄
- 1. 移動端基礎
- 2. 視口
- 2.1 meta標簽
- 3. 二倍圖
- 3.1 物理像素 & 物理像素比
- 3.2 背景縮放 background-size
- 4. 移動開發選擇和技術解決方案
- 4.1 移動端主流方案
- 4.2 移動端技術解決方案
- 4.3 CSS3盒子模型 box-sizing
- 4.4 移動端特殊樣式
- 5. 移動端常見布局
- 5.1 流式布局
- 5.2 flex布局
- 5.2.1 flext布局 - 父項常見屬性
- 5.2.2 flex布局 - 子項常見屬性
- 6. rem布局
- 6.1 rem基礎
- 6.1.1 rem單位
- 6.2 媒體查詢
- 6.2.1 什么是媒體查詢
- 6.2.2 媒體查詢語法規范
- 6.3 less 基礎
- 6.3.1 維護css弊端
- 6.3.2 Less 介紹
- 6.4 rem適配方案
- 6.4.1 rem實際開發適配方案1
- 6.4.2 蘇寧首頁
- 6.4.3 rem 適配方案2
- 7. 響應式開發原理
- 7.1 響應式開發原理
- 7.2 響應式布局容器
- 8 bootstrap的介紹
- 8.1 Bootstrap簡介
- 8.2 bootstrap優點
- 8.3 版本簡介
- 8.4 bootstrap基本使用
- 8.5 bootstrap布局容器
- 8.6 bootstrap柵格系統
- 3 案例制作 - 阿里百秀
- 3.1 技術選型
- 3.2 項目結構搭建
- 附：相關技術文章
- ~~未完待續
1. 移動端基礎
PC端及手機端瀏覽器眾多，開發中，兼容移動端主流瀏覽器，處理Webkit內核瀏覽器即可。
移動端調試方法：
2. 視口
視口（viewport）：瀏覽器顯示頁面內容的屏幕區域。
視口可分為 布局視口、視覺視口 和 理想視口。
2.1 meta標簽
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0,maximun-scale=1.0,minimun-scale=1.0">屬性表：
| width | 寬度設置的是 viewport 寬度，可以設置 device-width 特殊值。 |
| initial-scale | 初始縮放，大于0的數字。 |
| maximun-scale | 最大縮放，大于0的數字。 |
| minimun-scale | 最小縮放，大于0的數字。 |
| user-scalable | 用戶是否可以縮放，yes 或 no（1或0）。 |
最標準的 viewport 設置
- 視口寬度 和 設備保持一致;
- 視口的默認縮放比例1.0;
- 不允許用戶自行縮放;
- 最大允許的縮放比例1.0;
- 最小允許的縮放比例1.0。
3. 二倍圖
3.1 物理像素 & 物理像素比
???????物理像素點：屏幕顯示的最小顆粒，是物理真實存在的。在出廠時就已設置好，比如蘋果 6 是 750 × 1334。
???????物理像素比：一個px的能顯示的物理像素點的個數，稱為 物理像素比 或 屏幕像素比。
???????lRetina（視網膜屏幕）是一種顯示技術，可以把更多的物理像素點壓縮至一塊屏幕里，從而達到更高的分辨率，并提高屏幕顯示的細膩程度。
???????如果把 1 張100×100的圖片放到手機里，會按照物理像素比給我們縮放，而對于 1 張 50px × 50px 的圖片，在手機或 Retina 屏中打開，按照剛才的物理像素比會放大，這樣會造成圖片模糊。
???????在標準的viewport設置中，利用倍圖來提高圖片質量，解決在高清設備中的模糊問題。
???????通常使用 二倍圖， 因為iPhone 6 的影響背景圖片，注意縮放問題。
🔔注： 開發時的1px 不一定等于 1 個物理像素！
3.2 背景縮放 background-size
???????background-size 屬性規定背景圖像的尺寸。
語法：
background-size: length|percentage|cover|contain;;| length | 設置背景圖像的高度和寬度。第一個值設置寬度，第二個值設置高度； 如果只設置一個值，則第二個值會被設置為auto。 |
| percentage | 以父元素的百分比來設置背景圖像的寬度和高度。第一個值設置寬度，第二個值設置高度； 如果只設置一個值，則第二個值會被設置為 auto。 |
| cover | 把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域； 背景圖像的某些部分可能無法顯示在背景定位區域中。 |
| contain | 把背景圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。 |
示例：
/* 1. 背景圖片盒子尺寸 50 * 50，準備2倍圖（100*100） *//* 2. 需要把這個圖片縮放一半，也就是 50*50 background-size*/ div {width: 50px;height: 50px;border: 1px solid red;background: url(images/apple100.jpg) no-repeat;background-size: 50px 50px;}原理
如把一張50×50像素（css像素）的圖片，直接放到 iphone8 里面，會被放大 2 倍（即100×100），這樣圖片顯示會模糊；
此時，就用一張100×100 圖片，手動的把它縮小為50×50（css像素），這樣，我們準備的圖片比實際需要的大 2 倍，就解決上面的問題（這方式就是 2倍圖 ）。
4. 移動開發選擇和技術解決方案
4.1 移動端主流方案
單獨制作移動端頁面（主流）
通常情況下，網址域名前面加 m(mobile) 可以打開移動端。通過判斷設備，如果是移動設備打開，則跳到移動端頁面。
也就是說，PC端和移動端為兩套網站，pc端是pc端的樣式，再寫一套專門針對移動端適配的一套網站（比如京東）。
響應式頁面兼容移動端（次之）
響應式網站：即pc和移動端共用一套網站，只不過在不同屏幕下，樣式會自動適配（比如三星手機官網）。
4.2 移動端技術解決方案
移動端瀏覽器兼容問題
移動端瀏覽器基本以 webkit 內核為主，因此主要考慮 webkit 兼容性問題。
可以放心使用 H5 標簽和 CSS3 樣式，不用考慮兼容性問題。
同時，瀏覽器的私有前綴，只需要考慮添加 webkit 即可。
移動端公共樣式
移動端 CSS 初始化 推薦使用 normalize.css/
Normalize.css 只是一個很小的CSS文件，但它在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統的CSS reset，Normalize.css是一種現代的、為HTML5準備的優質替代方案。
normalize.css 特點如下：
- 保護了有價值的默認值；
- 修復了瀏覽器的 bug；
- 模塊化；
- 擁有詳細的文檔。下載 normalize.css
4.3 CSS3盒子模型 box-sizing
????????CSS 中的 box-sizing 屬性定義了如何計算一個元素的 總寬度 和 總高度。
/*CSS3盒子模型*/ box-sizing: border-box;/*傳統盒子模型*/ box-sizing: content-box;只要在CSS中加上“box-sizing: border-box;”這句，那么就將一個普通的盒子變成CSS3盒模型，padding和border就不會再撐大盒子了。
padding和border不被包含在定義的width和height之內。
padding和border被包含在定義的width和height之內。
移動端可以全部 使用 CSS3 盒子模型。
PC端如果完全需要兼容，則要用傳統模式；如果不考慮兼容性，就選擇 CSS3 盒子模型。
4.4 移動端特殊樣式
/*CSS3盒子模型*/ box-sizing: border-box; -webkit-box-sizing: border-box;/*禁用點擊時高亮（灰色）背景：transparent 透明 */ -webkit-tap-highlight-color: transparent;/*移動端瀏覽器默認的外觀在iOS上加上這個屬性才能給按鈕和輸入框自定義樣式*/ -webkit-appearance: none;/*禁用長按頁面時的彈出菜單*/ img,a { -webkit-touch-callout: none; }-webkit-tap-highlight-color ：該屬性只用于iOS (iPhone和iPad)，當用戶點擊一個a鏈接或者通過Javascript定義的可點擊元素的時候，它就會出現一個半透明的灰色背景。
5. 移動端常見布局
-
移動端單獨制作
- 流式布局（百分比布局）；
- flex 彈性布局（強烈推薦）；
- less+rem+ 媒體查詢布局；
- 混合布局。
-
響應式
- 媒體查詢；
- bootstarp。
5.1 流式布局
流式布局，也稱百分比布局、固定像素布局。
通過盒子的寬度設置成 百分比 來根據屏幕的寬度來進行伸縮，不受固定像素的限制，內容向兩側填充。
流式布局方式是移動web開發使用的 比較常見的布局方式。
示例：
<style>* {margin: 0;padding: 0;}section {width: 100%;max-width: 980px;min-width: 320px;margin: 0 auto;}section div {float: left;width: 50%;height: 400px;}section div:nth-child(1) {background-color: pink;}section div:nth-child(2) {background-color: purple;}</style> </head><body><section><div></div><div></div></section> </body>5.2 flex布局
2009年，W3C 提出了一種新的方案Flex 布局，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支持。
flex 是 flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為 flex 布局。
.box{display: flex; }行內元素也可以使用 Flex 布局。
.box{display: inline-flex; }Webkit 內核的瀏覽器，必須加上-webkit私有前綴。
.box{display: -webkit-flex; /* Safari */display: flex; }Flex布局： 又叫 伸縮布局 、彈性布局 、伸縮盒布局 、彈性盒布局 。
Flex 容器 / Flex 項目：采用 Flex 布局的元素，稱為 Flex 容器；其子元素自動成為容器成員，稱為 Flex 項目。
注： 當將父盒子設為 flex 布局后，子元素的 float、clear 、 vertical-align 屬性將失效。
簡單地說，就是通過給父盒子添加flex屬性，來控制子盒子的位置和排列方式。
【示例代碼】：
① 給span設置寬度和高度，背景顏色，還有藍色邊框；
② 只需添加 “display:flex;”即可將父盒子div設為 Flex 布局。
如下所示：
<!-- HTML結構 --> <div><span>1</span><span>2</span><span>3</span> </div> /* CSS樣式 */ div {display: flex;width: 80%;height: 300px;background-color: pink;justify-content: space-around; }div span {/* width: 150px; */height: 100px;background-color: purple;margin-right: 5px;flex: 1; }5.2.1 flext布局 - 父項常見屬性
| flex-direction | 設置主軸的方向 |
| justify-content | 設置主軸上的子元素排列方式 |
| flex-wrap | 設置子元素是否換行 |
| align-content | 設置側軸上的子元素的排列方式（多行） |
| align-items | 設置側軸上的子元素排列方式（單行） |
| flex-flow | 復合屬性，相當于同時設置了 flex-direction 和 flex-wrap |
flex 布局中，分為 主軸 和 側軸 兩個方向（類似的叫法有 ：行和列、x 軸和y 軸）。
-
默認主軸方向：x 軸方向（水平向右）
-
默認側軸方向：y 軸方向（水平向下）
-
屬性值
屬性值說明 row 默認，主軸為水平方向，起點在左端。 row-reverse 主軸為水平方向，起點在右端。 column 主軸為垂直方向，起點在上沿。 column-reverse 主軸為垂直方向，起點在下沿。 語法：
.box {flex-direction: row | row-reverse | column | column-reverse;}
🔔 注： 主軸 和 側軸 是會變化的，這要看flex-direction設置誰為主軸，剩下的就是側軸。而子元素是跟著主軸來排列的。
justify-content 設置主軸上的子元素排列方式
justify-content 屬性定義了項目在主軸上的對齊方式。
注意：使用該屬性之前一定要確定好主軸是哪個。
| flex-start | 默認值 從頭部開始，如果主軸是 x 軸，則從左到右 |
| flex-end | 從尾部開始排列 |
| center | 在主軸居中對齊（如果主軸是x軸，則水平居中） |
| space-around | 平分剩余空間 |
| space-between | 先兩邊貼邊，再平分剩余空間（重要） |
flex-wrap 設置子元素是否換行
語法：
.box{flex-wrap: nowrap | wrap | wrap-reverse; }開啟flex布局后，默認是為不換行的，如果想要換行效果，設置flex-wrap：wrap。
-
nowrap：不換行（默認值）；
-
wrap：換行，第一行在上方；
-
wrap-reverse：換行，第一行在下方。
/* 不換行 */ flex-wrap:nowrap/* 換行 */ flex-wrap:wrap
falign-items 設置側軸上的子元素排列方式（單行)
屬性可以應用于所有的flex容器。該屬性控制子項在側軸（默認是y軸）上的排列方式，在子項為單項 （單行） 的時候使用。
| stretch | 默認。 拉伸子元素以適應容器。 |
| flex-start | 從頭部開始排列 |
| flex-end | 從容器尾部開始排列 |
| center | 居中排列顯示 |
| baseline | 元素在容器的基線 |
不同取值效果如下：
1）語法：
align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;2）示例：
div {display: flex; /* 開啟flex布局 */align-items:center;}align-content 設置側軸上的子元素的排列方式（多行）
只適用于多行的 flex 容器（單行情況下無效），可以設置 上對齊、 下對齊、居中、拉伸 以及 平均分配剩余空間 等屬性值。
條件：① 必須開啟 flex 布局：display:flex;；②必須設置換行：flex-wrap:wrap;
示例：
div { display: flex; flex-flow: row wrap; align-content:space-around; }| flex-start | 默認值。在側軸的頭部開始排列。 |
| flex-end | 在側軸的尾部開始排列。 |
| stretch | 設置子項元素高度、平分父元素（容器）高度。 |
| center | 在側軸中間顯示 |
| space-around | 子項在側軸平分剩余空間 |
| space-between | 子項在側軸先分布在兩頭，再平分剩余空間 |
align-content 和 align-items 的區別
- align-items：適用于單行。只有上對齊、下對齊、居中和 拉伸；
- align-content：適應于換行（多行）的（單行情況下無效）。可以設置 上對齊、下對齊、居中、拉伸以及平均分配剩余空間等屬性值。
總結：單行用align-items ，多行用 align-content。
flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復合屬性
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。
語法示例：
flex-flow:row wrap; .box { flex-flow: <flex-direction> || <flex-wrap>; }5.2.2 flex布局 - 子項常見屬性
- flex：子項目占的份數；
- align-self：控制子項自己在側軸的排列方式；
- order：定義子項的排列順序（前后順序）。
flex 屬性定義子項目分配 剩余空間，用flex來表示占多少 份數。
【語法示例】：
<p><span> 1 </span><span> 2 </span><span> 3 </span> </p> p {display: flex;width: 60%;height: 150px; ｝p span {flex: 1;}p span:nth-child(2) {flex: 2; }flex: <number>; 默認值為 0
align-self 控制子項自身在側軸上的排列方式
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可 覆蓋align-items屬性。
默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
【語法】：
.item {align-self: auto | flex-start | flex-end | center | baseline | stretch; }該屬性除了auto，其他都與align-items屬性完全一致。
【示例效果】：
【示例代碼】：
<!--- HTML結構 ---> <div><span>1</span><span>2</span><span>3</span> </div> /* CSS樣式 */ div {display: flex;width: 80%;height: 150px;background-color: pink; }div span {width: 150px;height: 50px;background-color: #E77F24;margin: 5px; }div span:nth-child(3) {align-self: flex-end; }order 屬性定義項目的排列順序
order屬性：定義項目的排列順序。數值越小，排列越靠前，默認為0（注意：和 z-index 不一樣。）。
【語法】：
.item {order: <integer>; }【示例效果】
產生此示例效果，是在上例設置align-self屬性之基礎上增加了如下代碼：
order屬性默認值為0。這里把盒子2 的order設為了 -1，-1 比盒子1的默認order默認屬性值 0 小，所以本示例效果圖中，盒子 2 在 盒子 1 之 前。
6. rem布局
6.1 rem基礎
6.1.1 rem單位
rem (root em)是一個相對單位，類似于em，em是父元素字體大小。
不同的是rem的基準是相對于html元素的字體大小。
比如，根元素（html）設置font-size=12px; 非根元素設置width:2rem; 則換算成px表示就是24px。
/* 根html 為 12px */ html {font-size: 12px; } /* 此時 div 的字體大小就是 24px */ div {font-size: 2rem; }rem的優勢：父元素文字大小可能不一致，但是整個頁面只有一個html，可以很好來控制整個頁面的元素大小。
6.2 媒體查詢
6.2.1 什么是媒體查詢
媒體查詢（Media Query）是CSS3新語法。
- 使用 @media查詢，可以針對不同的媒體類型定義不同的樣式；
- @media 可以針對不同的屏幕尺寸設置不同的樣式；
- 當重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面；
- 目前針對很多蘋果手機、Android手機，平板等設備都用得到多媒體查詢。
6.2.2 媒體查詢語法規范
- 用 @media開頭 注意“@”符號
- mediatype 媒體類型
- 關鍵字 ：and、not、only；
- media feature 媒體特性必須有小括號包含
mediatype 查詢類型
將不同的終端設備劃分成不同的類型，稱為 媒體類型；
關鍵字
關鍵字將媒體類型或多個媒體特性連接到一起做為媒體查詢的條件。
- and：可以將多個媒體特性連接到一起，相當于“且”的意思；
- not：排除某個媒體類型，相當于“非”的意思，可以省略；
- only：指定某個特定的媒體類型，可以省略。
媒體特性
每種媒體類型都具體各自不同的特性，根據不同媒體類型的媒體特性設置不同的展示風格。我們暫且了解三個。
注意他們要加小括號包含：
?
媒體查詢書寫規則
注意： 為了防止混亂，媒體查詢我們要按照從小到大或者從大到小的順序來寫,但是我們最喜歡的還是從小到大來寫，這樣代碼更簡潔
6.3 less 基礎
6.3.1 維護css弊端
CSS 是一門非程序式語言，沒有變量、函數、SCOPE（作用域）等概念。
- CSS 需要書寫大量看似沒有邏輯的代碼，CSS 冗余度是比較高的；
- 不方便維護及擴展，不利于復用；
- CSS 沒有很好的計算能力；
- 非前端開發工程師來講，往往會因為缺少 CSS 編寫經驗而很難寫出組織良好且易于維護的 CSS 代碼項目。
6.3.2 Less 介紹
Less（LeanerStyle Sheets 的縮寫）是一門 CSS擴展語言，也成為CSS預處理器。
做為 CSS的一種形式的擴展，它并沒有減少CSS的功能，而是在現有的CSS語法上，為CSS加入程序式語言的特性。
它在CSS 的語法基礎之上，引入了變量，Mixin（混入），運算以及函數等功能，大大簡化了 CSS 的編寫，并且降低了 CSS的維護成本，就像它的名稱所說的那樣，Less可以讓我們用更少的代碼做更多的事情。
Less中文網址：http://lesscss.cn/
常見的CSS預處理器：Sass、Less、Stylus；
一句話：Less是一門 CSS 預處理語言，它擴展了CSS的動態特性。
Less安裝
①安裝nodejs，可選擇版本(8.0)，網址：http://nodejs.cn/download/
②檢查是否安裝成功，使用cmd命令（win10是window+r 打開運行輸入cmd） —輸入“node –v”查看版本即可
③基于nodejs在線安裝Less，使用cmd命令“npm install -g less”即可
④檢查是否安裝成功，使用 cmd 命令“ lessc -v ”查看版本即可
Less 使用之變量
變量是指沒有固定的值，可以改變的。因為我們CSS中的一些顏色和數值等經常使用。
@變量名:值;- 必須有@為前綴
- 不能包含特殊字符
- 不能以數字開頭
- 大小寫敏感
Less 編譯 vocode Less 插件
Easy LESS 插件用來把less文件編譯為css文件
安裝完畢插件，重新加載下 vscode。
只要保存一下Less文件，會自動生成CSS文件。
Less 嵌套
// 將css改為less #header .logo {width: 300px; }#header {.logo {width: 300px;} }如果遇見 （交集|偽類|偽元素選擇器） ，利用&進行連接：
a:hover{color:red; } a{&:hover{color:red;} }Less 運算
任何數字、顏色或者變量都可以參與運算。就是Less提供了加（+）、減（-）、乘（*）、除（/）算術運算。
/*Less 里面寫*/ @witdh: 10px + 5; div {border: @witdh solid red; }/*生成的css*/ div {border: 15px solid red; }/*Less 甚至還可以這樣 */ width: (@width + 5) * 2;- 乘號（*）和除號（/）的寫法 ；
- 運算符中間左右有個空格隔開 1px + 5；
- 對于兩個不同的單位的值之間的運算，運算結果的值取第一個值的單位；
- 如果兩個值之間只有一個值有單位，則運算結果就取該單位。
6.4 rem適配方案
讓一些不能等比自適應的元素，達到當設備尺寸發生改變的時候，等比例適配當前設備；
使用媒體查詢根據不同設備按比例設置html的字體大小，然后頁面元素使用rem做尺寸單位，當html字體大小變化元素尺寸也會發生變化，從而達到等比縮放的適配。
技術方案：
less+rem+媒體查詢
lflexible.js+rem
總結：
兩種方案現在都存在。
方案2 更簡單，現階段大家無需了解里面的js代碼。
6.4.1 rem實際開發適配方案1
① 假設設計稿是750px；
② 假設把整個屏幕劃分為15等份（可以是20份、也可以是10等份）；
③ 每一份作為html字體大小，這里就是50px；
④ 那么在320px設備的時候，字體大小為320/15就是 21.33px；
⑤ 用頁面元素的大小除以不同的 html字體大小會發現他們比例還是相同的；
⑥ 比如以750為標準設計稿；
⑦ 一個100×100像素的頁面元素在750屏幕下， 就是 100/ 50 轉換為rem 是 2rem*2rem 比例是 1 比 1；
⑧ 320屏幕下， html字體大小為21.33 則 2rem= 42.66px，此時寬和高都是 42.66 ，但是寬和高的比例還是 1比1；
⑨ 但是已經能實現不同屏幕下 頁面元素盒子等比例縮放的效果。
總結：
① 最后的公式：頁面元素的rem值 = 頁面元素值（px） / （屏幕寬度 / 劃分的份數）；
② 屏幕寬度/劃分的 份數 就是 html font-size 的大小；
③ 或者：頁面元素的rem值 = 頁面元素值(px) / html font-size 字體大小。
6.4.2 蘇寧首頁
蘇寧首頁地址 ：蘇寧首頁
技術選型
方案：我們采取單獨制作移動頁面方案；
技術：布局采取rem適配布局（less + rem + 媒體查詢）；
設計圖： 本設計圖采用 750px 設計尺寸。
搭建文件結構
設置視口標簽以及引入初始化樣式
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" href="css/normalize.css">設置公共common.less文件
- 新建 common.less ，設置好最常見的屏幕尺寸，利用媒體查詢設置不同的 html 字體大小，因為除了首頁其他頁面也需要；
- 關注的尺寸有 320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px；
- 劃分的份數定為 15 等份；
- 因為 pc 端也可以打開蘇寧移動端首頁，默認html字體大小為 50px，注意這句話寫到最上面。
6.4.3 rem 適配方案2
手機淘寶團隊出的簡潔高效 移動端適配庫；
利用它，我們不用再寫不同屏幕的媒體查詢，因為里面js做了處理。
原理： 把當前設備劃分為10等份，但是不同設備下，比例還是一致的。
我們要做的，就是確定好當前設備的 html 文字大小就可以了，比如當前設計稿是 750px， 那么，html 文字大小設置為 75px(750px/10) 即可；
頁面元素rem值： 頁面元素的 px 值 / 75；
剩余的，flexible.js去算！
github地址：https://github.com/amfe/lib-flexible
總結：
因為flexible是默認將屏幕分為10等分；
但是當屏幕 >750 的時候，希望不要再去重置html字體了；
所以要自己通過媒體查詢設置一下；并且要把權重提到最高；
VSCode px 轉換 rem 插件 “cssrem”。
因為 cssrem 中 css 自動轉化為 rem 是參照默認插件的字體尺寸16轉換的，所以需要自己配置
7. 響應式開發原理
7.1 響應式開發原理
???????就是使用媒體查詢針對不同寬度的設備進行布局和樣式的設置，從而適配不同設備的目的。
設備的劃分情況：
- 小于768的為 超小屏幕（手機）
- 768~992之間的為 小屏設備（平板）
- 992~1200的 中等屏幕（桌面顯示器）
- 大于1200的 寬屏設備（大桌面顯示器）
7.2 響應式布局容器
響應式需要一個 父級 做為 布局容器，來配合子級元素來實現變化效果；
原理： 在不同屏幕下，通過媒體查詢來改變此布局容器的大小，再改變里面子元素的排列方式和大小，從而實現不同屏幕下，看到不同的頁面布局和樣式變化。
父容器版心的尺寸劃分：
- 超小屏幕 （手機，小于 768px）：設置寬度為 100%；
- 小屏幕 （平板，大于等于 768px）：設置寬度為 750px；
- 中等屏幕 （桌面顯示器，大于等于 992px）：寬度設置為 970px；
- 大屏幕 （大桌面顯示器，大于等于 1200px）：寬度設置為 1170px 。
但是我們也可以根據實際情況 自定義劃分。
8 bootstrap的介紹
8.1 Bootstrap簡介
Bootstrap 來自 Twitter（推特），是目前最受歡迎的前端框架。Bootstrap 是基于HTML、CSS 和 JavaScript 的，它簡潔靈活，使得 Web 開發更加快捷。
中文網 | 官網 | 推薦網站
框架：顧名思義就是一套架構，它有一套比較完整的網頁功能解決方案，而且控制權在框架本身，有預制樣式庫、組件和插件。使用者要按照框架所規定的某種規范進行開發。
8.2 bootstrap優點
- 標準化的html+css編碼規范；
- 提供了一套簡潔、直觀、強悍的組件；
- 有自己的生態圈，不斷的更新迭代；
- 讓開發更簡單，提高了開發的效率。
8.3 版本簡介
2.x.x：停止維護，兼容性好。缺點是代碼不夠簡潔，功能不夠完善。
3.x.x：目前使用最多，穩定。但是放棄了對IE6、IE7的支持。對 IE8 支持但是界面效果不好，偏向用于開發響應式布局、移動設備優先的WEB 項目。
4.x.x：最新版，目前還不是很流行。
8.4 bootstrap基本使用
本案例僅講解其樣式庫的使用。
創建文件夾結構
創建 html 骨架結構
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ --><title>Bootstrap 101 Template</title><!-- Bootstrap --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]><script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]--></head><body><h1>你好，世界！</h1><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!-- Include all compiled plugins (below), or include individual files as needed --><script src="js/bootstrap.min.js"></script></body> </html>引入相關樣式文件
<!-- Bootstrap 核心樣式--> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">書寫內容
直接拿 Bootstrap 預先定義好的樣式來使用；
修改 Bootstrap 原來的樣式，注意權重問題；
學好 Bootstrap 的關鍵在于知道它定義了哪些樣式，以及這些樣式能實現什么樣的效果
8.5 bootstrap布局容器
Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 或者.container-fluid 容器，它提供了兩個作此用處的類。
.container
- 響應式布局的容器 固定寬度；
- 大屏 ( >=1200px) 寬度定為 1170px；
- 中屏 ( >=992px) 寬度定為 970px；
- 小屏 ( >=768px) 寬度定為 750px；
- 超小屏 (100%) 。
.container-fluid
- 流式布局容器，百分百寬度；
- 占據全部視口（viewport）的容器。
8.6 bootstrap柵格系統
Bootstrap提供了一套響應式、移動設備優先的流式柵格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。
柵格系統用于通過一系列的行（row）與列（column）的組合來創建頁面布局，你的內容就可以放入這些創建好的布局中。
- 按照不同屏幕劃分為1~12 等份
- 行（row）：可以去除父容器作用15px的邊距；
- xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大；
- 列（column）大于 12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列
- 每一列默認有左右 15 像素的 padding；
- 可以同時為一列指定多個設備的類名，以便劃分不同份數 例如 class="col-md-4 col-sm-6"
柵格嵌套
柵格系統內置的柵格系統將內容再次嵌套。簡單理解就是一個列內再分成若干份小列。我們可以通過添加一個新的 .row 元素和一系列 .col-sm-* 元素到已經存在的 .col-sm-*元素內。
<!-- 列嵌套 --><div class="col-sm-4"><div class="row"><div class="col-sm-6">小列</div><div class="col-sm-6">小列</div></div> </div>列偏移
使用 .col-md-offset-* 類可以將列向右側偏移。這些類實際是通過使用 * 選擇器為當前元素增加了左側的邊距（margin）。
<!-- 列偏移 --><div class="row"><div class="col-lg-4">1</div><div class="col-lg-4 col-lg-offset-4">2</div></div>列排序
通過使用 .col-md-push-* 和 .col-md-pull-* 類就可以很容易的改變列（column）的順序。
<!-- 列排序 --><div class="row"><div class="col-lg-4 col-lg-push-8">左側</div><div class="col-lg-8 col-lg-pull-4">右側</div></div>響應式工具
為了加快對移動設備友好的頁面開發工作，利用媒體查詢功能，并使用這些工具類可以方便的針對不同設備展示或隱藏頁面內容。
3 案例制作 - 阿里百秀
3.1 技術選型
方案：采取響應式頁面開發方案；
技術：bootstrap框架；
設計圖： 本設計圖采用 1280px 設計尺寸；
3.2 項目結構搭建
Bootstrap 使用四步曲：
container寬度修改
因為本效果圖采取 1280的寬度， 而Bootstrap 里面 container寬度最大為 1170px，因此我們需要手動改下container寬度：
/* 利用媒體查詢修改 container寬度適合效果圖寬度 */ @media (min-width: 1280px) { .container { width: 1280px; } }本案例完整代碼：網盤下載 ??|???提取碼: 2ary
附：相關技術文章
垂直居中 | flex語法
~~未完待續
上一篇：重溫前端基礎（一） HTML、CSS、H5C3
總結
以上是生活随笔為你收集整理的重温前端基础（二） 移动WEB开发的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue文件在VsCode工具中红色波浪线
- 下一篇： 前端知识点随记