移動(dòng)web開發(fā)流式布局 ======================
1.0 移動(dòng)端基礎(chǔ)
1.1瀏覽器現(xiàn)狀
PC端常見瀏覽器：360瀏覽器、谷歌瀏覽器、火狐瀏覽器、QQ瀏覽器、百度瀏覽器、搜狗瀏覽器、IE瀏覽器。
移動(dòng)端常見瀏覽器：UC瀏覽器，QQ瀏覽器，歐朋瀏覽器，百度手機(jī)瀏覽器，360安全瀏覽器，谷歌瀏覽器，搜狗手機(jī)瀏覽器，獵豹瀏覽器，以及其他雜牌瀏覽器。
國內(nèi)的UC和QQ，百度等手機(jī)瀏覽器都是根據(jù)Webkit修改過來的內(nèi)核，國內(nèi)尚無自主研發(fā)的內(nèi)核，就像國內(nèi)的手機(jī)操作系統(tǒng)都是基于Android修改開發(fā)的一樣。
總結(jié)：兼容移動(dòng)端主流瀏覽器，處理Webkit內(nèi)核瀏覽器即可。
1.2 手機(jī)屏幕的現(xiàn)狀
- 移動(dòng)端設(shè)備屏幕尺寸非常多，碎片化嚴(yán)重。
- Android設(shè)備有多種分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等，還有傳說中的2K，4k屏。
- 近年來iPhone的碎片化也加劇了，其設(shè)備的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等。
- 作為開發(fā)者無需關(guān)注這些分辨率，因?yàn)槲覀兂Ｓ玫某叽鐔挝皇?px 。
1.3常見移動(dòng)端屏幕尺寸
1.4移動(dòng)端調(diào)試方法
- Chrome DevTools（谷歌瀏覽器）的模擬手機(jī)調(diào)試
- 搭建本地web服務(wù)器，手機(jī)和服務(wù)器一個(gè)局域網(wǎng)內(nèi)，通過手機(jī)訪問服務(wù)器
- 使用外網(wǎng)服務(wù)器，直接IP或域名訪問
2.0 視口
視口（viewport）就是瀏覽器顯示頁面內(nèi)容的屏幕區(qū)域。 視口可以分為布局視口、視覺視口和理想視口
2.1 布局視口 layout viewport
一般移動(dòng)設(shè)備的瀏覽器都默認(rèn)設(shè)置了一個(gè)布局視口，用于解決早期的PC端頁面在手機(jī)上顯示的問題。
iOS, Android基本都將這個(gè)視口分辨率設(shè)置為 980px，所以PC上的網(wǎng)頁大多都能在手機(jī)上呈現(xiàn)，只不過元素看上去很小，一般默認(rèn)可以通過手動(dòng)縮放網(wǎng)頁。
2.2視覺視口 visual viewport
字面意思，它是用戶正在看到的網(wǎng)站的區(qū)域。注意：是網(wǎng)站的區(qū)域。
我們可以通過縮放去操作視覺視口，但不會(huì)影響布局視口，布局視口仍保持原來的寬度。
2.3理想視口 ideal viewport
為了使網(wǎng)站在移動(dòng)端有最理想的瀏覽和閱讀寬度而設(shè)定
理想視口，對設(shè)備來講，是最理想的視口尺寸
需要手動(dòng)添寫meta視口標(biāo)簽通知瀏覽器操作
meta視口標(biāo)簽的主要目的：布局視口的寬度應(yīng)該與理想視口的寬度一致，簡單理解就是設(shè)備有多寬，我們布局的視口就多寬
總結(jié)：我們開發(fā)最終會(huì)用理想視口，而理想視口就是將布局視口的寬度修改為視覺視口
2.4meta標(biāo)簽
最標(biāo)準(zhǔn)的viewport設(shè)置
- 視口寬度和設(shè)備保持一致
- 視口的默認(rèn)縮放比例1.0
- 不允許用戶自行縮放
- 最大允許的縮放比例1.0
- 最小允許的縮放比例1.0
3.0二倍圖
3.1物理像素&物理像素比
物理像素點(diǎn)指的是屏幕顯示的最小顆粒，是物理真實(shí)存在的。這是廠商在出廠時(shí)就設(shè)置好了,比如蘋果6 是 750* 1334
我們開發(fā)時(shí)候的1px 不是一定等于1個(gè)物理像素的
一個(gè)px的能顯示的物理像素點(diǎn)的個(gè)數(shù)，稱為物理像素比或屏幕像素比
如果把1張100*100的圖片放到手機(jī)里面會(huì)按照物理像素比給我們縮放
lRetina（視網(wǎng)膜屏幕）是一種顯示技術(shù)，可以將把更多的物理像素點(diǎn)壓縮至一塊屏幕里，從而達(dá)到更高的分辨率，并提高屏幕顯示的細(xì)膩程度。
對于一張 50px * 50px 的圖片,在手機(jī)或 Retina 屏中打開，按照剛才的物理像素比會(huì)放大倍數(shù)，這樣會(huì)造成圖片模糊
在標(biāo)準(zhǔn)的viewport設(shè)置中，使用倍圖來提高圖片質(zhì)量，解決在高清設(shè)備中的模糊問題
通常使用二倍圖， 因?yàn)閕Phone 6 的影響背景圖片 注意縮放問題
3.2背景縮放background-size
background-size 屬性規(guī)定背景圖像的尺寸
background-size: 背景圖片寬度 背景圖片高度;
單位： 長度|百分比|cover|contain;
cover把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。
contain把圖像圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域
4.0 移動(dòng)開發(fā)選擇和技術(shù)解決方案
4.1移動(dòng)端主流方案
1.單獨(dú)制作移動(dòng)端頁面（主流）
通常情況下，網(wǎng)址域名前面加 m(mobile)
可以打開移動(dòng)端。通過判斷設(shè)備，如果是移動(dòng)設(shè)備打開，則跳到移動(dòng)端頁面。
也就是說，PC端和移動(dòng)端為兩套網(wǎng)站，pc端是pc斷的樣式，移動(dòng)端在寫一套，專門針對移動(dòng)端適配的一套網(wǎng)站
2.響應(yīng)式頁面兼容移動(dòng)端（其次）
響應(yīng)式網(wǎng)站：即pc和移動(dòng)端共用一套網(wǎng)站，只不過在不同屏幕下，樣式會(huì)自動(dòng)適配
4.2 移動(dòng)端技術(shù)解決方案
1.移動(dòng)端瀏覽器兼容問題
移動(dòng)端瀏覽器基本以 webkit 內(nèi)核為主，因此我們就考慮webkit兼容性問題。
我們可以放心使用 H5 標(biāo)簽和 CSS3 樣式。
同時(shí)我們?yōu)g覽器的私有前綴我們只需要考慮添加 webkit 即可
2.移動(dòng)端公共樣式
移動(dòng)端 CSS 初始化推薦使用 normalize.css/
Normalize.css：保護(hù)了有價(jià)值的默認(rèn)值
Normalize.css：修復(fù)了瀏覽器的bug
Normalize.css：是模塊化的
Normalize.css：擁有詳細(xì)的文檔
官網(wǎng)地址： http://necolas.github.io/normalize.css/
4.3 移動(dòng)端大量使用 CSS3盒子模型box-sizin
傳統(tǒng)模式寬度計(jì)算：盒子的寬度 = CSS中設(shè)置的width + border + padding
CSS3盒子模型： 盒子的寬度= CSS中設(shè)置的寬度width 里面包含了 border 和 padding
也就是說，我們的CSS3中的盒子模型， padding 和 border 不會(huì)撐大盒子了
/*CSS3盒子模型*/
box-sizing: border-box;
/*傳統(tǒng)盒子模型*/
box-sizing: content-box;
移動(dòng)端可以全部CSS3 盒子模型
PC端如果完全需要兼容，我們就用傳統(tǒng)模式，如果不考慮兼容性，我們就選擇 CSS3 盒子模型
4.4移動(dòng)端特殊樣式
/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*點(diǎn)擊高亮我們需要清除清除 設(shè)置為transparent 完成透明*/
-webkit-tap-highlight-color: transparent;
/*在移動(dòng)端瀏覽器默認(rèn)的外觀在iOS上加上這個(gè)屬性才能給按鈕和輸入框自定義樣式*/
-webkit-appearance: none;
/*禁用長按頁面時(shí)的彈出菜單*/
img,a { -webkit-touch-callout: none; }
5.0移動(dòng)端常見布局
移動(dòng)端單獨(dú)制作
- 流式布局（百分比布局）
- flex 彈性布局（強(qiáng)烈推薦）
- less+rem+媒體查詢布局
- 混合布局
響應(yīng)式
- 媒體查詢
- bootstarp
流式布局：
流式布局，就是百分比布局，也稱非固定像素布局。
通過盒子的寬度設(shè)置成百分比來根據(jù)屏幕的寬度來進(jìn)行伸縮，不受固定像素的限制，內(nèi)容向兩側(cè)填充。
流式布局方式是移動(dòng)web開發(fā)使用的比較常見的布局方式。
移動(dòng)web開發(fā)——flex布局 ======================
1.0傳統(tǒng)布局和flex布局對比
1.1傳統(tǒng)布局
- 兼容性好
- 布局繁瑣
- 局限性，不能再移動(dòng)端很好的布局
1.2 flex布局
- 操作方便，布局極其簡單，移動(dòng)端使用比較廣泛
- pc端瀏覽器支持情況比較差
- IE11或更低版本不支持flex或僅支持部分
1.3 建議
- 如果是pc端頁面布局，還是采用傳統(tǒng)方式
- 如果是移動(dòng)端或者是不考慮兼容的pc則采用flex
2.0 flex布局原理
- flex 是 flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性，任何一個(gè)容器都可以指定為 flex 布局。
- 當(dāng)我們?yōu)楦负凶釉O(shè)為 flex 布局以后，子元素的 float、clear 和 vertical-align 屬性將失效。
- flex布局又叫伸縮布局 、彈性布局 、伸縮盒布局 、彈性盒布局
- 采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動(dòng)成為容器成員，稱為 Flex 項(xiàng)目（flex item），簡稱"項(xiàng)目"。
總結(jié)：就是通過給父盒子添加flex屬性，來控制子盒子的位置和排列方式
3.0 父項(xiàng)常見屬性
- flex-direction：設(shè)置主軸的方向
- justify-content：設(shè)置主軸上的子元素排列方式
- flex-wrap：設(shè)置子元素是否換行
- align-content：設(shè)置側(cè)軸上的子元素的排列方式（多行）
- align-items：設(shè)置側(cè)軸上的子元素排列方式（單行）
- flex-flow：復(fù)合屬性，相當(dāng)于同時(shí)設(shè)置了 flex-direction 和 flex-wrap
3.1 flex-direction設(shè)置主軸的方向
在 flex 布局中，是分為主軸和側(cè)軸兩個(gè)方向，同樣的叫法有 ： 行和列、x 軸和y 軸
默認(rèn)主軸方向就是 x 軸方向，水平向右
默認(rèn)側(cè)軸方向就是 y 軸方向，水平向下
-
注意： 主軸和側(cè)軸是會(huì)變化的，就看 flex-direction 設(shè)置誰為主軸，剩下的就是側(cè)軸。而我們的子元素是跟著主軸來排列的
2-1.JPG
3.2 justify-content 設(shè)置主軸上的子元素排列方式
3.3 flex-wrap設(shè)置是否換行
- 默認(rèn)情況下，項(xiàng)目都排在一條線（又稱”軸線”）上。flex-wrap屬性定義，flex布局中默認(rèn)是不換行的。
- nowrap 不換行
- wrap 換行
3.4 align-items 設(shè)置側(cè)軸上的子元素排列方式（單行 ）
- 該屬性是控制子項(xiàng)在側(cè)軸（默認(rèn)是y軸）上的排列方式 在子項(xiàng)為單項(xiàng)（單行）的時(shí)候使用
- flex-start 從頭部開始
- flex-end 從尾部開始
- center 居中顯示
- stretch 拉伸
3.5 align-content 設(shè)置側(cè)軸上的子元素的排列方式（多行）
設(shè)置子項(xiàng)在側(cè)軸上的排列方式 并且只能用于子項(xiàng)出現(xiàn) 換行 的情況（多行），在單行下是沒有效果的。
3.6 align-content 和align-items區(qū)別
- align-items 適用于單行情況下， 只有上對齊、下對齊、居中和 拉伸
- align-content適應(yīng)于換行（多行）的情況下（單行情況下無效）， 可以設(shè)置 上對齊、下對齊、居中、拉伸以及平均分配剩余空間等屬性值。
- 總結(jié)就是單行找align-items 多行找 align-content
3.7 flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復(fù)合屬性
flex-flow:row wrap;
4.0 flex布局子項(xiàng)常見屬性
- flex子項(xiàng)目占的份數(shù)
- align-self控制子項(xiàng)自己在側(cè)軸的排列方式
- order屬性定義子項(xiàng)的排列順序（前后順序）
4.1 flex 屬性
flex 屬性定義子項(xiàng)目分配剩余空間，用flex來表示占多少份數(shù)。
.item {
flex: <number>; /* 默認(rèn)值 0 */
}
4.2 align-self控制子項(xiàng)自己在側(cè)軸上的排列方式
align-self 屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對齊方式，可覆蓋 align-items 屬性。
默認(rèn)值為 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同于 stretch。
span:nth-child(2) {
/* 設(shè)置自己在側(cè)軸上的排列方式 */
align-self: flex-end;
}
4.3 order 屬性定義項(xiàng)目的排列順序
數(shù)值越小，排列越靠前，默認(rèn)為0。
注意：和 z-index 不一樣。
.item {
order: <number>;
}
移動(dòng)web開發(fā)之rem布局 ===================
rem基礎(chǔ)
rem單位
rem (root em)是一個(gè)相對單位，類似于em，em是父元素字體大小。
不同的是rem的基準(zhǔn)是相對于html元素的字體大小。
比如，根元素（html）設(shè)置font-size=12px; 非根元素設(shè)置width:2rem; 則換成px表示就是24px。
/* 根html 為 12px */
html {
font-size: 12px;
}
/* 此時(shí) div 的字體大小就是 24px */
div {
font-size: 2rem;
}
rem的優(yōu)勢：父元素文字大小可能不一致， 但是整個(gè)頁面只有一個(gè)html，可以很好來控制整個(gè)頁面的元素大小。
媒體查詢
什么是媒體查詢
媒體查詢（Media Query）是CSS3新語法。
- 使用 @media查詢，可以針對不同的媒體類型定義不同的樣式
- @media 可以針對不同的屏幕尺寸設(shè)置不同的樣式
- 當(dāng)你重置瀏覽器大小的過程中，頁面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁面
- 目前針對很多蘋果手機(jī)、Android手機(jī)，平板等設(shè)備都用得到多媒體查詢
媒體查詢語法規(guī)范
- 用 @media開頭 注意@符號
- mediatype 媒體類型
- 關(guān)鍵字 and not only
- media feature 媒體特性必須有小括號包含
@media mediatype and|not|only (media feature) {
CSS-Code;
}
-
mediatype 查詢類型
將不同的終端設(shè)備劃分成不同的類型，稱為媒體類型
1.jpg 關(guān)鍵字
關(guān)鍵字將媒體類型或多個(gè)媒體特性連接到一起做為媒體查詢的條件。
- and：可以將多個(gè)媒體特性連接到一起，相當(dāng)于“且”的意思。
- not：排除某個(gè)媒體類型，相當(dāng)于“非”的意思，可以省略。
- only：指定某個(gè)特定的媒體類型，可以省略。
-
媒體特性
每種媒體類型都具體各自不同的特性，根據(jù)不同媒體類型的媒體特性設(shè)置不同的展示風(fēng)格。我們暫且了解三個(gè)。
注意他們要加小括號包含
2.jpg
<link rel="stylesheet" href="sod.css" media="screen and (max-width: 800px)">
-
媒體查詢書寫規(guī)則
注意： 為了防止混亂，媒體查詢我們要按照從小到大或者從大到小的順序來寫,但是我們最喜歡的還是從小到大來寫，這樣代碼更簡潔
3 (1).png
less 基礎(chǔ)
維護(hù)css弊端
CSS 是一門非程序式語言，沒有變量、函數(shù)、SCOPE（作用域）等概念。
- CSS 需要書寫大量看似沒有邏輯的代碼，CSS 冗余度是比較高的。
- 不方便維護(hù)及擴(kuò)展，不利于復(fù)用。
- CSS 沒有很好的計(jì)算能力
- 非前端開發(fā)工程師來講，往往會(huì)因?yàn)槿鄙?CSS 編寫經(jīng)驗(yàn)而很難寫出組織良好且易于維護(hù)的 CSS 代碼項(xiàng)目。
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的動(dòng)態(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 使用之變量
變量是指沒有固定的值，可以改變的。因?yàn)槲覀僀SS中的一些顏色和數(shù)值等經(jīng)常使用。
@變量名:值;
- 必須有@為前綴
- 不能包含特殊字符
- 不能以數(shù)字開頭
- 大小寫敏感
@color: pink;
Less 編譯 vocode Less 插件
Easy LESS 插件用來把less文件編譯為css文件
安裝完畢插件，重新加載下 vscode。
只要保存一下Less文件，會(huì)自動(dòng)生成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)算符中間左右有個(gè)空格隔開 1px + 5
- 對于兩個(gè)不同的單位的值之間的運(yùn)算，運(yùn)算結(jié)果的值取第一個(gè)值的單位
- 如果兩個(gè)值之間只有一個(gè)值有單位，則運(yùn)算結(jié)果就取該單位
rem適配方案
1.讓一些不能等比自適應(yīng)的元素，達(dá)到當(dāng)設(shè)備尺寸發(fā)生改變的時(shí)候，等比例適配當(dāng)前設(shè)備。
2.使用媒體查詢根據(jù)不同設(shè)備按比例設(shè)置html的字體大小，然后頁面元素使用rem做尺寸單位，當(dāng)html字體大小變化元素尺寸也會(huì)發(fā)生變化，從而達(dá)到等比縮放的適配。
技術(shù)方案：
1.less+rem+媒體查詢
2.lflexible.js+rem
總結(jié)：
兩種方案現(xiàn)在都存在。
方案2 更簡單，現(xiàn)階段大家無需了解里面的js代碼。
rem實(shí)際開發(fā)適配方案1
①假設(shè)設(shè)計(jì)稿是750px
②假設(shè)我們把整個(gè)屏幕劃分為15等份（劃分標(biāo)準(zhǔn)不一可以是20份也可以是10等份）
③每一份作為html字體大小，這里就是50px
④那么在320px設(shè)備的時(shí)候，字體大小為320/15就是 21.33px
⑤用我們頁面元素的大小除以不同的 html字體大小會(huì)發(fā)現(xiàn)他們比例還是相同的
⑥比如我們以750為標(biāo)準(zhǔn)設(shè)計(jì)稿
⑦一個(gè)100100像素的頁面元素在 750屏幕下， 就是 100/ 50 轉(zhuǎn)換為rem 是 2rem2rem 比例是1比1
⑧320屏幕下， html字體大小為21.33 則 2rem= 42.66px 此時(shí)寬和高都是 42.66 但是寬和高的比例還是 1比1
⑨但是已經(jīng)能實(shí)現(xiàn)不同屏幕下 頁面元素盒子等比例縮放的效果
總結(jié)：
①最后的公式：頁面元素的rem值 = 頁面元素值（px） / （屏幕寬度 / 劃分的份數(shù)）
②屏幕寬度/劃分的份數(shù)就是 htmlfont-size 的大小
③或者：頁面元素的rem值 = 頁面元素值（px） / html font-size 字體大小
rem 適配方案2
手機(jī)淘寶團(tuán)隊(duì)出的簡潔高效 移動(dòng)端適配庫
我們再也不需要在寫不同屏幕的媒體查詢，因?yàn)槔锩鎗s做了處理
它的原理是把當(dāng)前設(shè)備劃分為10等份，但是不同設(shè)備下，比例還是一致的。
我們要做的，就是確定好我們當(dāng)前設(shè)備的html 文字大小就可以了
比如當(dāng)前設(shè)計(jì)稿是 750px， 那么我們只需要把 html 文字大小設(shè)置為 75px(750px / 10) 就可以
里面頁面元素rem值： 頁面元素的px 值 / 75
剩余的，讓flexible.js來去算
github地址：https://github.com/amfe/lib-flexible
總結(jié)：
因?yàn)閒lexible是默認(rèn)將屏幕分為10等分
但是當(dāng)屏幕大于750的時(shí)候希望不要再去重置html字體了
所以要自己通過媒體查詢設(shè)置一下
并且要把權(quán)重提到最高
VSCode px 轉(zhuǎn)換rem 插件 cssrem
因?yàn)閏ssrem中css自動(dòng)轉(zhuǎn)化為rem是參照默認(rèn)插件的16轉(zhuǎn)換的所以需要自己配置
移動(dòng)端WEB開發(fā)之響應(yīng)式布局 ===================
1.0 響應(yīng)式開發(fā)原理
1.1 響應(yīng)式開發(fā)原理
就是使用媒體查詢針對不同寬度的設(shè)備進(jìn)行布局和樣式的設(shè)置，從而適配不同設(shè)備的目的。
設(shè)備的劃分情況：
- 小于768的為超小屏幕（手機(jī)）
- 768~992之間的為小屏設(shè)備（平板）
- 992~1200的中等屏幕（桌面顯示器）
- 大于1200的寬屏設(shè)備（大桌面顯示器）
1.2 響應(yīng)式布局容器
響應(yīng)式需要一個(gè)父級做為布局容器，來配合子級元素來實(shí)現(xiàn)變化效果。
原理就是在不同屏幕下，通過媒體查詢來改變這個(gè)布局容器的大小，再改變里面子元素的排列方式和大小，從而實(shí)現(xiàn)不同屏幕下，看到不同的頁面布局和樣式變化。
父容器版心的尺寸劃分
- 超小屏幕（手機(jī)，小于 768px）：設(shè)置寬度為 100%
- 小屏幕（平板，大于等于 768px）：設(shè)置寬度為 750px
- 中等屏幕（桌面顯示器，大于等于 992px）：寬度設(shè)置為 970px
- 大屏幕（大桌面顯示器，大于等于 1200px）：寬度設(shè)置為 1170px
但是我們也可以根據(jù)實(shí)際情況自己定義劃分
2.0 bootstrap的介紹
2.1Bootstrap簡介
Bootstrap 來自 Twitter（推特），是目前最受歡迎的前端框架。Bootstrap 是基于HTML、CSS 和 JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。
框架：顧名思義就是一套架構(gòu)，它有一套比較完整的網(wǎng)頁功能解決方案，而且控制權(quán)在框架本身，有預(yù)制樣式庫、組件和插件。使用者要按照框架所規(guī)定的某種規(guī)范進(jìn)行開發(fā)。
2.2 bootstrap優(yōu)點(diǎn)
- 標(biāo)準(zhǔn)化的html+css編碼規(guī)范
- 提供了一套簡潔、直觀、強(qiáng)悍的組件
- 有自己的生態(tài)圈，不斷的更新迭代
- 讓開發(fā)更簡單，提高了開發(fā)的效率
2.3 版本簡介
2.x.x：停止維護(hù),兼容性好,代碼不夠簡潔，功能不夠完善。
3.x.x：目前使用最多,穩(wěn)定,但是放棄了IE6-IE7。對 IE8 支持但是界面效果不好,偏向用于開發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的WEB 項(xiàng)目。
4.x.x：最新版，目前還不是很流行
2.4bootstrap基本使用
在現(xiàn)階段我們還沒有接觸JS相關(guān)課程，所以我們只考慮使用它的樣式庫。
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個(gè)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="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://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="http://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)什么樣的效果
2.5 bootstrap布局容器
Bootstrap 需要為頁面內(nèi)容和柵格系統(tǒng)包裹一個(gè) .container 或者.container-fluid 容器，它提供了兩個(gè)作此用處的類。
.container
- 響應(yīng)式布局的容器 固定寬度
- 大屏 ( >=1200px) 寬度定為 1170px
- 中屏 ( >=992px) 寬度定為 970px
- 小屏 ( >=768px) 寬度定為 750px
- 超小屏 (100%)
.container-fluid
- 流式布局容器 百分百寬度
- 占據(jù)全部視口（viewport）的容器。
2.6 bootstrap柵格系統(tǒng)
Bootstrap提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dò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）”所在的元素將被作為一個(gè)整體另起一行排列
- 每一列默認(rèn)有左右15像素的 padding
- 可以同時(shí)為一列指定多個(gè)設(shè)備的類名，以便劃分不同份數(shù) 例如 class="col-md-4 col-sm-6"
柵格嵌套
柵格系統(tǒng)內(nèi)置的柵格系統(tǒng)將內(nèi)容再次嵌套。簡單理解就是一個(gè)列內(nèi)再分成若干份小列。我們可以通過添加一個(gè)新的 .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)式工具
為了加快對移動(dòng)設(shè)備友好的頁面開發(fā)工作，利用媒體查詢功能，并使用這些工具類可以方便的針對不同設(shè)備展示或隱藏頁面內(nèi)容。
.hidden- .visible-
