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