一、響應式網頁
一個頁面，可以根據瀏覽設備的不同，以及特性的不同，而自動改變布局、大小等
-
響應式網頁的三個特征
1）流式網格布局(fluid) 2）可伸縮的圖片和字體 3）CSS3 Media Query - 根據客戶端瀏覽設備的特性，有選擇的執行部分css -
優缺點
優點：可以自動適配PC/PAD/PHONE瀏覽器屏幕 缺點：代碼變復雜，需要考慮更多兼容性，并不適合內容非常多的網頁
二、如何測試響應式網頁
1、真實物理設備
優點：測試結構真實可靠
不足：測試任務量太大
2、使用第三方軟件
優點：無需添置真實設備
不足：軟件測試效率低，部分功能無法測試，測試結果有待進一步驗證
3、使用瀏覽器模擬器測試
優點：測試功能強大，簡單易用，
不足：測試結果有待進一步驗證
三、響應式布局必須清楚的兩個概念
-
viewport - 視口
1) 2010年之前，html網頁基本都是為pc設計的，寬度比較大,在手機上的顯示內容會擠壓到一塊，后來iOSiOS引入了viewport(視口)的概念，來優化手機上觀看網站的體驗 2) iOS引入了viewport(視口)的概念：用于顯示網頁內容的一個邏輯概念，其高度和寬度都可以任意制定，網頁不是顯示在物理窗口，而是顯示在視口中-就可以實現大網頁不經縮放，直接顯示手機中，但需要用戶來回滑動 3) viewport的用法 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" > viewport 可以指定如下屬性： width: 視口的寬度，可以取值為數值，或device-width height：視口的高度，一般不指定 initial-scale：初始時的縮放倍率 minimum-scale : 允許的最小縮放倍率 maximum-scale : 允許的最大縮放倍率 user-scalable : 是否允許用戶手動縮放，可取值1/0/yes/no -
CSS3 media query
1) 作用：根據客戶端瀏覽設備的特性，有選擇的執行部分css 2) media: 指瀏覽網頁的設備，如screen 3) Query: 查詢出當前瀏覽設備的特性，如類型、寬度、高度、分辨率、色彩、方向(landscape/portrait) 4) css3MediaQuery有兩種用法 根據媒體的特性，加載不同的外部css <link media="screen and (min-width:990px) and (max-width:1000px)" rel="stylesheet" type="text/css" href="css/pc.css"/> 不足：客戶端會不管媒體特性，請求所有的css文件 根據媒體的特性，執行某段css中的部分內容 @media screen and (min-width: 990px) {} https://wangliguang.github.io/categories/
三、如何編寫響應式網頁
1. 在head標簽中，聲明viewport元標簽, 使網頁的視口和瀏覽器的寬高保持一致
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >
2. 根據瀏覽器的不同，加載不同的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" />
3. 同一個css文件中，也根據不同的屏幕分辨率，選擇應用不同的css規則
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
4. 注意：
1) 所有元素的寬不能制定固定值，必須使用相對的寬度值
width:"60%" 或者 width:"auto"
2) 字體不能使用絕對大小(px),必須使用相對大小(em)
3) 布局用的各個區塊的位置都是浮動的，不是固定不變的
4) 除了布局和文本，還必須實現圖片的自動縮放,或者根據客戶端屏幕的不同，加載不同尺寸的圖片
img {
max-width:100%;
}
四、 Bootstrap
www.bootcss.com
-
是一個html/css/js框架，適用于移動設備優先的響應式網頁
V2: 面向PC進行了樣式設定，同時兼顧pad和phone V3: 面向Phone進行樣式設定，同時兼顧了PC 主要涉及： HTML: 為H5擴展了一些自定義屬性 CSS: CSS Reset + 幾千個class JS: 基于JQ提供了十幾個插件函數 -
bootstrap分為五部分
1. 起步startup 創建一個bootstrap頁面，查看對下述標簽進行了哪些樣式重置 html body h1-h6 a img table ul 2. 全局css樣式 global css 1) 按鈕 bootstrap中常用的五種顏色 紅色->危險 綠色->成功 黃色->警告 淺藍色->信息 深藍色->基礎的 bootstrap中常用的四個大小 btn-lg -》大 btn-md -》中 btn-sm -》小 btn-xs -》最小 塊級按鈕 btn-block 調整按鈕的位置 pull-right ->右浮動 pull-left ->左浮動 2) 圖片 img-rounded 圓角 img-circle 圓形 img-thumbnail 縮略圖 img-responsive 圖片支持響應式布局 3) 排版和代碼，僅作了解 文本顏色: 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 4) 列表 list-unstyle 去掉列表項樣式 list-inline 將所有元素放在同一行 5) 表格 bootlint是一個js，由bootstrap官方提供，用于檢測使用bootstrap的頁面中場景的html錯誤，class使用方面的錯誤-默認請求下瀏覽器檢查不出來的 table table-bordered 帶邊框的 table-responsive 響應式表格，注意，使用在table的父元素上，而不是table上 table-striped 隔行變色的表格 table-hover 帶懸停效果的表格 6) 柵格布局系統 7) 表單 組件commponent
插件plugin
定制customize
總結：
1. 響應式布局就是bootstrap
錯的，使用bootstrap是為了更加簡單的做響應式頁面
2. viewport,是一個邏輯概念，可以設置寬高，用于顯示頁面
3. css Media query 根據不同的情況使用不同的css樣式
4. 自己做響應式頁面
1) 設置viewport寬=device-width
2) 使用css3 media query加載樣式
3) 注意點
浮動 字體設置相對的 width相對的 img-》max-width:100%
5. bootstrap做響應式
1. ie兼容
2. 設置viewport
3. 導入關鍵css文件
css reset + 上千個類
4. 使用css hack 讓低版本ie兼容html5新標簽和cssmediaquery
5. 給元素設置類
6. 導入bootstrap的關鍵js文件
查看bootstrap中對h1-h6，img, body的重置樣式
五、 案例展示
cssmediaquery在一個css文件中選擇執行不同的css樣式
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="allDevice.css">
</head>
<body>
<h1在一個css文件中使用不同的樣式/h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</body>
</html>
貼圖
