《響應式Web設計——HTML5和CSS3實戰》——知識點整理總結(持更~)
1.HTML5、CSS3及響應式入門
1.1 什麼是響應式
如果要用一句話概括，那麼響應式網頁是針對人以裝置對網頁內容進行完美佈局的一種顯示機制。相反，如果需要根據不同裝置提供特定的內容和功能，那就需要一個真正的“手機版”網站。這種情況下，手機版網站會提供與桌面版網站完全不同的使用者體驗。
1.2 視口和螢幕尺寸
視口是指瀏覽器視窗內的內容區域，不包含工具欄、標籤欄等，也就是網頁實際顯示的區域。螢幕尺寸是指裝置的物理顯示區域。
2.媒體查詢：支援不同的視口
2.1 媒體查詢概述
媒體查詢由媒體型別和一個或多個檢測媒體特性的條件表示式組成。媒體查詢可用於檢測的媒體特性有width、height和color等。使用媒體查詢，可以在不改變頁面內容的情況下，為特定的一些輸出裝置定製顯示效果
2.2 媒體查詢語法
body {
background-color: grey;
}
@media screen and (max-width: 960px) {
body {
background-color: red;
}
}
@media screen and (max-width: 768px) {
body {
background-color: orange;
}
}
@media screen and (max-width: 550px) {
body {
background-color: yellow;
} 將這段程式碼放在某個css檔案的最後，檢視與之關聯的網頁，改變視口大小，就可以看到背景顏色隨視口大小而變換的效果了。
媒體查詢的幾種方式：
1、在向頁面的<head></head>標籤中連結CSS檔案是可以使用媒體查詢
/*在視口寬度大於800px的顯示屏裝置才載入該檔案*/
<link rel="stylesheet" media="screen and (orientation:portrait) and (min-width:800px)" 2、在CSS樣式表中使用媒體查詢
/*在螢幕寬度小於等於400畫素的裝置上，h1元素文字顏色變為綠色*/
@media screen and (max-device-width:400px){
h1{
color:green
}
}3、使用CSS的@import指令在當前樣式表中引入其他樣式表（會增加HTTP請求，影響載入速度）
/*給視口最大寬度為360畫素的顯示屏裝置載入一個名為phone.css的樣式表*/
@import url("phone.css") screen and (max-width:360px)2.3 媒體查詢能檢測到的特性
- width:視口寬度
- height：視口高度
- device-width：裝置螢幕的寬度
- device-height:裝置螢幕的高度
- orientation:檢測裝置處於橫向還是縱向
- aspect-ratio：基於視口寬度和高度的寬高比
- device-aspect-ratio:基於裝置螢幕寬度和高度的寬高比
- color:每種顏色的位數
- color-index:裝置的顏色索引表中的顏色數
- monochrome:檢測單色幀緩衝區中每畫素所使用的位數
- resolution:用來檢測螢幕或印表機的解析度
- scan:電視機的掃描方式，值可設為progressive或interlace
- grid:用來檢測輸出裝置是網格裝置還是點陣圖裝置
2.4 重置樣式
2.5 阻止移動瀏覽器自動調整頁面大小
使移動端的頁面在不同裝置上顯示效果一樣，可以將頁面寬度設為裝置寬度。viewport具體用法
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />- width 設定頁面寬度，width=device-width表示頁面寬度等於裝置寬度
- initial-scale 設定頁面初識縮放值，為一個數字，可以帶小數
- maximum-scale 允許使用者的最小縮放值，為一個數字，可以帶小數
- minimum-scale 允許使用者的最大縮放值，為一個數字，可以帶小數
- user-scalable 是否允許使用者進行縮放
2.6 響應式設計中內容始終優先
在視口區的標籤順序決定了側邊欄會顯示在主內容區的前面，而在窄視口裝置中，我們應該考慮到先讓使用者看到主內容。
3.擁抱流式佈局
百分比佈局和媒體查詢結合在一起構成響應式設計的核心
3.1 將網頁熊固定佈局修改為百分比佈局
目標元素寬度÷上下文元素寬度=百分比寬度
上述公式不僅可以將元素的固定寬度轉換成百分比，同時還可以將字型的固定畫素大小轉換為相對單位，即em代替px。現代瀏覽器的預設文字大小都是16px。因此，一開始給body標籤下應用以下三條語句效果是一樣的。
font-size:100%;
font-size:16px;
font-size:1em;如果某個元素樣式中有font-size:48px;那我們通過轉換，用48÷3=16，可以將這個樣式改成font-size:3em;要注意的是該元素的大小是針對其父元素而言的，而行高是針對其本身而言的，所以運用公式時要注意。
#content h1{
font-size: 69px;
}
#content h1 span{
font-size: 38px;
line-height: 40px;
}
/*修改後*/
#content h1{
font-size: 4.3125em; /*69÷16*/
}
#content h1 span{
line-height: 1.0526315em; /*40÷38*/
font-size: 0.5507246em; /*38÷69*/
}接著實現圖片的隨流動佈局相應縮放，具體在css中做如下宣告就好了
img{
max-width：100%
}4.響應式中的HTML5
4.1 如何編寫一個HTML5網頁
<!DOCTYPE html>
<html lang=zh>
<head>
<meta charset=utf-8>HTML5的程式碼更為簡潔。比如之前
<link href="css/home.css" rel="stylesheet" type="text/css"/>而在HTML5中可以不那麼仔細，沒有閉合標籤的斜線以及引號，同樣可以
<link href=css/home.css rel=stylesheet >當然你也根據自己的習慣編寫程式碼。
在HTML5中，<a>標籤內可以包含多個元素。但不能包含a標籤也不能巢狀表單。
<a>
<h1>title</h1>
<p>this is a paragraph</p>
<img src="img/arrow_btn1.png" />
</a>4.2 HTML5 語義化標籤
語義化就是給HTML標籤賦予意義的過程。html語義化可以讓頁面的內容結構化，便於瀏覽器解析，便於搜尋引擎解析（有利於爬蟲抓取更多的有效資訊。爬蟲依賴於標籤來確定上下文和各個關鍵字的權重），並提高程式碼的可維護度和可重用性。少用div、span這樣無語義的通用容器。
常見語義化標籤<section>、<header>、<nav> 、<footer>、<hgroup>、<article>、<aside>、<address>、<b>、<i>、<em>
4.3 給頁面新增視訊或音訊
視訊 <video></video>
音訊 <audio></audio>
可以設定寬高, 區別在於<audio></audio> 沒有可視內容區域。
提供備用的媒體檔案（如下）如果瀏覽器支援Ogg格式，則使用第一個檔案，否則繼續解析下一個<source>標籤
<video width="640" height="480" controls autoplay preload="auto" loop poster="myVideoPoster.jpg">
<source src="video/myVideo.ovg" type="video/ogg">
<source src="video/myVideo.mp4" type="video/mp4">
hello wrold!
</video>4.4 離線web
給每個需要離線使用的網頁指定一個字尾名為.manifest的檔案
<html lang="en" manifest="/offline.manifest">manifest檔案必須以 CACHE MANIFEST 開頭。CACHE：部分羅列了所有離線使用所需的檔案。NETWORK：部分羅列了所有不需要被快取的檔案。在網路暢通是跳過快取的一些檔案。FALLBACK：部分使用/字元定義了一個URL模板。作用是訪問每個頁面時都會問“快取中有這個頁面嗎？”有的話顯示快取，沒有的話顯示制定的檔案。
CACHE MANIFEST
#v1
CACHE:
index.html
css/main.css
img/backgroud1.jpg
NETWROK:
*
FALLBACK:
//offline.html