一、響應(yīng)式網(wǎng)頁
一個(gè)頁面旁涤，可以根據(jù)瀏覽設(shè)備的不同翔曲，以及特性的不同，而自動改變布局拭抬、大小等
-
響應(yīng)式網(wǎng)頁的三個(gè)特征
1）流式網(wǎng)格布局(fluid) 2）可伸縮的圖片和字體 3）CSS3 Media Query - 根據(jù)客戶端瀏覽設(shè)備的特性部默，有選擇的執(zhí)行部分css -
優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：可以自動適配PC/PAD/PHONE瀏覽器屏幕 缺點(diǎn)：代碼變復(fù)雜，需要考慮更多兼容性造虎，并不適合內(nèi)容非常多的網(wǎng)頁
二、如何測試響應(yīng)式網(wǎng)頁
-
真實(shí)物理設(shè)備
優(yōu)點(diǎn)：測試結(jié)果真實(shí)可靠 不足：測試任務(wù)量太大 -
使用第三方軟件
優(yōu)點(diǎn)：無需添置真實(shí)設(shè)備 不足：軟件測試效率低纷闺，部分功能無法測試算凿，測試結(jié)果有待進(jìn)一步驗(yàn)證 -
使用瀏覽器模擬器測試
優(yōu)點(diǎn)：測試功能強(qiáng)大，簡單易用 不足：測試結(jié)果有待進(jìn)一步驗(yàn)證
三犁功、響應(yīng)式布局必須要清除的兩個(gè)概念
-
viewport
2010年之前氓轰，html 網(wǎng)頁基本都是為 pc 設(shè)計(jì)的，寬度比較大,在手機(jī)上的顯示內(nèi)容會擠壓到一塊浸卦，后來 iOS 引入了 viewport (視口)的概念署鸡，來優(yōu)化手機(jī)上觀看網(wǎng)站的體驗(yàn)
iOS 引入了 viewport (視口)的概念：用于顯示網(wǎng)頁內(nèi)容的一個(gè)邏輯概念，其高度和寬度都可以任意制定，網(wǎng)頁不是顯示在物理窗口靴庆，而是顯示在視口中-就可以實(shí)現(xiàn)大網(wǎng)頁不經(jīng)縮放时捌，直接顯示手機(jī)中，但需要用戶來回滑動
-
viewport 的用法
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >
viewport 可以指定如下屬性：
width: 視口的寬度炉抒，可以取值為數(shù)值奢讨，或device-width height：視口的高度，一般不指定 initial-scale：初始時(shí)的縮放倍率 minimum-scale : 允許的最小縮放倍率 maximum-scale : 允許的最大縮放倍率 user-scalable : 是否允許用戶手動縮放焰薄，可取值1/0/yes/no -
CSS3 media query
作用：根據(jù)客戶端瀏覽設(shè)備的特性拿诸，有選擇的執(zhí)行部分css
media: 指瀏覽網(wǎng)頁的設(shè)備，如screen
Query: 查詢出當(dāng)前瀏覽設(shè)備的特性塞茅，如類型亩码、寬度、高度野瘦、分辨率蟀伸、色彩、方向(landscape/portrait)
-
css3MediaQuery有兩種用法
根據(jù)媒體的特性缅刽，加載不同的外部css
<link media="screen and (min-width:990px)" rel="stylesheet" type="text/css" href="css/pc.css"/>
不足：客戶端會不管媒體特性啊掏，請求所有的css文件
根據(jù)媒體的特性，執(zhí)行某段css中的部分內(nèi)容
@media screen and (min-width: 990px) {}
三衰猛、如何編寫響應(yīng)式網(wǎng)頁
-
在head標(biāo)簽中迟蜜，聲明viewport元標(biāo)簽, 使網(wǎng)頁的視口和瀏覽器的寬高保持一致
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" > -
根據(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" /> -
同一個(gè)css文件中啡省，也根據(jù)不同的屏幕分辨率娜睛，選擇應(yīng)用不同的css規(guī)則
@media screen and (max-device-width: 400px) { .column { float: none; width:auto; } #sidebar { display:none; } } -
注意：
- 所有元素的寬不能制定固定值，必須使用相對的寬度值
width:"60%" 或者 width:"auto"字體不能使用絕對大小(px),必須使用相對大小(em)
布局用的各個(gè)區(qū)塊的位置都是浮動的卦睹，不是固定不變的
-
除了布局和文本畦戒，還必須實(shí)現(xiàn)圖片的自動縮放,或者根據(jù)客戶端屏幕的不同，加載不同尺寸的圖片
img {
max-width:100%;
}
四结序、 Bootstrap
-
是一個(gè)html/css/js框架障斋，適用于移動設(shè)備優(yōu)先的響應(yīng)式網(wǎng)頁
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ù) bootstrap分為五部分
-
起步startup
創(chuàng)建一個(gè)bootstrap頁面垃环，查看對下述標(biāo)簽進(jìn)行了哪些樣式重置 html body h1-h6 a img table ul -
全局css樣式 global css
-
按鈕
bootstrap中常用的五種顏色 紅色->危險(xiǎn) 綠色->成功 黃色->警告 淺藍(lán)色->信息 深藍(lán)色->基礎(chǔ)的 bootstrap中常用的四個(gè)大小 btn-lg ->大 btn-md ->中 btn-sm ->小 btn-xs ->最小 塊級按鈕 btn-block 調(diào)整按鈕的位置 pull-right ->右浮動 pull-left ->左浮動
-
-
圖片
img-rounded 圓角 img-circle 圓形 img-thumbnail 縮略圖 img-responsive 圖片支持響應(yīng)式布局 -
部分排版和代碼
文本顏色 text-danger text-success text-warning text-info text-primary 背景顏色 bg-danger bg-success bg-warning bg-info bg-primary 文本對齊方式 text-left text-right text-center text-justify 文本對齊方式 text-lowercase text-uppercase text-capitalize -
列表
list-unstyle 去掉列表項(xiàng)樣式 list-inline 將所有元素放在同一行 -
表格
bootlint是一個(gè)js，由bootstrap官方提供返敬，用于檢測使用bootstrap的頁面中場景的html錯(cuò)誤遂庄，class使用方面的錯(cuò)誤-默認(rèn)請求下瀏覽器檢查不出來的 table table-bordered 帶邊框的 table-responsive 響應(yīng)式表格，注意劲赠，使用在table的父元素上涛目，而不是table上 table-striped 隔行變色的表格 table-hover 帶懸停效果的表格
