一、響應(yīng)式網(wǎng)頁(yè)
一個(gè)頁(yè)面，可以根據(jù)瀏覽設(shè)備的不同，以及特性的不同，而自動(dòng)改變布局、大小等
-
響應(yīng)式網(wǎng)頁(yè)的三個(gè)特征
1）流式網(wǎng)格布局(fluid)
2）可伸縮的圖片和字體
3）CSS3 Media Query - 根據(jù)客戶端瀏覽設(shè)備的特性，有選擇的執(zhí)行部分css 優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：可以自動(dòng)適配PC/PAD/PHONE瀏覽器屏幕
缺點(diǎn)：代碼變復(fù)雜，需要考慮更多兼容性，并不適合內(nèi)容非常多的網(wǎng)頁(yè)
二、如何測(cè)試響應(yīng)式網(wǎng)頁(yè)
1、真實(shí)物理設(shè)備
優(yōu)點(diǎn)：測(cè)試結(jié)構(gòu)真實(shí)可靠
不足：測(cè)試任務(wù)量太大
2、使用第三方軟件
優(yōu)點(diǎn)：無(wú)需添置真實(shí)設(shè)備
不足：軟件測(cè)試效率低，部分功能無(wú)法測(cè)試，測(cè)試結(jié)果有待進(jìn)一步驗(yàn)證
3、使用瀏覽器模擬器測(cè)試
優(yōu)點(diǎn)：測(cè)試功能強(qiáng)大，簡(jiǎn)單易用，
不足：測(cè)試結(jié)果有待進(jìn)一步驗(yàn)證
三、響應(yīng)式布局必須要清除的兩個(gè)概念
1. viewport
1) 2010年之前，html網(wǎng)頁(yè)基本都是為pc設(shè)計(jì)的，寬度比較大,在手機(jī)上的顯示內(nèi)容會(huì)擠壓到一塊，后來(lái)iOSiOS引入了viewport(視口)的概念，來(lái)優(yōu)化手機(jī)上觀看網(wǎng)站的體驗(yàn)‘’
2) iOS引入了viewport(視口)的概念：用于顯示網(wǎng)頁(yè)內(nèi)容的一個(gè)邏輯概念，其高度和寬度都可以任意制定，網(wǎng)頁(yè)不是顯示在物理窗口，而是顯示在視口中-就可以實(shí)現(xiàn)大網(wǎng)頁(yè)不經(jīng)縮放，直接顯示手機(jī)中，但需要用戶來(lái)回滑動(dòng)
3) viewport的用法
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >
viewport 可以指定如下屬性：
width: 視口的寬度，可以取值為數(shù)值，或device-width
height：視口的高度，一般不指定
initial-scale：初始時(shí)的縮放倍率8
minimum-scale : 允許的最小縮放倍率
maximum-scale : 允許的最大縮放倍率
user-scalable : 是否允許用戶手動(dòng)縮放，可取值1/0/yes/no
2. CSS3 media query
1) 作用：根據(jù)客戶端瀏覽設(shè)備的特性，有選擇的執(zhí)行部分css
2) media: 指瀏覽網(wǎng)頁(yè)的設(shè)備，如screen
3) Query: 查詢出當(dāng)前瀏覽設(shè)備的特性，如類型、寬度、高度、分辨率、色彩、方向(landscape/portrait)
4) css3MediaQuery有兩種用法
根據(jù)媒體的特性，加載不同的外部css
<link media="screen and (min-width:990px)" rel="stylesheet" type="text/css" href="css/pc.css"/>
不足：客戶端會(huì)不管媒體特性，請(qǐng)求所有的css文件
根據(jù)媒體的特性，執(zhí)行某段css中的部分內(nèi)容
@media screen and (min-width: 990px) {}
https://wangliguang.github.io/categories/
三、如何編寫(xiě)響應(yīng)式網(wǎng)頁(yè)
1. 在head標(biāo)簽中，聲明viewport元標(biāo)簽, 使網(wǎng)頁(yè)的視口和瀏覽器的寬高保持一致
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >
2. 根據(jù)瀏覽器的不同，加載不同的css文件
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px)" href="smallScreen.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="tinyScreen.css" />
最大化的網(wǎng)頁(yè)
縮小后
3. 同一個(gè)css文件中，也根據(jù)不同的屏幕分辨率，選擇應(yīng)用不同的css規(guī)則
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
4. 注意：
1) 所有元素的寬不能制定固定值，必須使用相對(duì)的寬度值
width:"60%" 或者 width:"auto"
2) 字體不能使用絕對(duì)大小(px),必須使用相對(duì)大小(em)
3) 布局用的各個(gè)區(qū)塊的位置都是浮動(dòng)的，不是固定不變的
4) 除了布局和文本，還必須實(shí)現(xiàn)圖片的自動(dòng)縮放,或者根據(jù)客戶端屏幕的不同，加載不同尺寸的圖片
img {
max-width:100%;
}
四、 Bootstrap
1. 是一個(gè)html/css/js框架，適用于移動(dòng)設(shè)備優(yōu)先的響應(yīng)式網(wǎng)頁(yè)
V2: 面向PC進(jìn)行了樣式設(shè)定，同時(shí)兼顧pad和phone
V3: 面向Phone進(jìn)行樣式設(shè)定，同時(shí)兼顧了PC
主要涉及：
HTML: 為H5擴(kuò)展了一些自定義屬性 data-XXX
CSS: CSS Reset + 幾千個(gè)class
JS: 基于JQ提供了十幾個(gè)插件函數(shù)
2. bootstrap分為五部分
1. 起步startup
創(chuàng)建一個(gè)bootstrap頁(yè)面，查看對(duì)下述標(biāo)簽進(jìn)行了哪些樣式重置
html body h1-h6 a img table ul
2. 全局css樣式 global css
1) 按鈕
bootstrap中常用的五種顏色
紅色->危險(xiǎn)
綠色->成功
黃色->警告
淺藍(lán)色->信息
深藍(lán)色->基礎(chǔ)的
bootstrap中常用的四個(gè)大小
btn-lg -》大
btn-md -》中
btn-sm -》小
btn-xs -》最小
塊級(jí)按鈕
btn-block
調(diào)整按鈕的位置
pull-right ->右浮動(dòng)
pull-left ->左浮動(dòng)
2) 圖片
img-rounded 圓角
img-circle 圓形
img-thumbnail 縮略圖
img-responsive 圖片支持響應(yīng)式布局
3) 排版和代碼，僅作了解
文本顏色
text-danger
text-success
text-warning
text-info
text-primary
背景顏色
bg-danger
bg-success
bg-warning
bg-info
bg-primary
文本對(duì)齊方式
text-left
text-right
text-center
text-justify
文本對(duì)齊方式
text-lowercase
text-uppercase
text-capitalize
4) 列表
list-unstyle 去掉列表項(xiàng)樣式
list-inline 將所有元素放在同一行
5) 表格
bootlint是一個(gè)js，由bootstrap官方提供，用于檢測(cè)使用bootstrap的頁(yè)面中場(chǎng)景的html錯(cuò)誤，class使用方面的錯(cuò)誤-默認(rèn)請(qǐng)求下瀏覽器檢查不出來(lái)的
table
table-bordered 帶邊框的
table-responsive 響應(yīng)式表格，注意，使用在table的父元素上，而不是table上
table-striped 隔行變色的表格
table-hover 帶懸停效果的表格
6) 柵格布局系統(tǒng)
7) 表單
3. 組件commponent
4. 插件plugin
5. 定制customize