視口：瀏覽器視窗內的內容區域，不包含工具欄，標籤欄。網頁實際顯示.
螢幕尺寸：裝置物理顯示區域

各種寬度和高度

      a、可視區的真實寬度和高度
          document.documentElement.clientWidth 
          document.documentElement.clientHeight

          都去掉滾動條的大小（一般是17畫素），比如我的dell筆記本在chrome下，
          正常的可視區（即無滾動條）大小是1366*663，假如水平和垂直方向都有滾動條的話，這兩個值
          的大小為 1349
 
 * 646
      b、
         document.documentElement.offsetWidth   無滾動條 1366  有滾動條 1349 同a
         document.documentElement.offsetHeight  根據實際的html元素被撐開的大小

      c、
         window.innerWidth / window.innerHeight 
           （1）有滾動條 document.documentElement.clientWidth + 滾動條寬度
           （2）無滾動條 等於document.documentElement
 
.clientWidth
                高度計算規則同寬度

響應式方法論

• 先針對小視口設計
• 然後逐步對大視口漸進增強
• 響應式設計中內容始終優先
• 流動佈局、彈性圖片和媒體查詢：使用百分比佈局建立流動的彈性介面，同時使用媒體查詢來限制元素的變動範圍。（平滑過渡）

HTML5的時代

• 簡化標籤
• 語義化標籤
• CSS3(圓角，漸變…..)

-webkit-,-moz-是各廠商釋出正式版本之前，實驗各自對css3新特性的實現

業務需求和預算的考慮

• 客戶是否想支援網際網路使用者增長最迅猛的市場？如果想，那響應式方法就很適合。
• 客戶是否想要最簡潔、快速，且易於維護的程式碼？如果想，那響應式方法就很適合。
• 客戶能否理解使用者體驗可以且本應該根據瀏覽器不同而不同？如果可以理解，那響應式方法就很適合。
• 客戶是否要求設計效果在所有瀏覽器中都保持一致，包括IE 8 以及更低版本？如果是，響應式設計就不適合。
• 該網站的當前或預期客戶中，是否有百分之七十以上的人可能使用Internet Explorer 8或者更低版本？如果是，則響應式設計不適合。
• 在預算允許的情況下，一個完全定製的“移動”版網站比響應式設計更適合。

網站不必在所有瀏覽器中表現一致

客戶->思維定式->說服引導（理由如下）

• 允許頁面顯示效果在老舊瀏覽器中有細微的差別，這樣可以使程式碼更易維護，將來更新的成本也更低。
• 讓頁面元素在那些老舊瀏覽器（如Internet Explorer 8 及更低版本）中表現一致會導致網站增加大量的圖片。這會使網站變慢，製作成本變高，而且更難維護。
• 現代瀏覽器可以理解的簡潔程式碼等同於更快速的網站。快速響應的網站在搜尋引擎中的評級高於慢騰騰的網站。
• 使用老舊瀏覽器的使用者越來越少，使用現代瀏覽器的使用者越來越多——我們應該支援大多數！

媒體查詢

W3C規範稽核：工作草案（Working Draft）->候選推薦標準（Candidate Recommendation）->提議推薦標準(Proposed
Recommendation)->幾年時間等待->W3C 推薦標準（REC)
- CSS3 是由很多附加模組組合而成的。媒體查詢就是其中的一個模組。
- 媒體查詢可以讓我們根據裝置顯示器的特性為其設定CSS 樣式。

媒體查詢語法

CSS 樣式表中使用媒體查詢

在螢幕寬度小於等於400 畫素的裝置上，h1 元素的文字顏色就會變成綠色。
@media screen and (max-device-width: 400px) {
h1 { color: green }
}
給視口最大寬度為360 畫素的顯示屏裝置載入一個名為phone.css 的樣式表。
@import url("phone.css") screen and (max-width:360px);

使用CSS 的@import 方式會增加HTTP 請求（這會影響載入速度）

通過標籤的media 屬性為樣式表指定裝置型別（如顯示屏或印表機）。

非縱向放置的顯示屏裝置
<link rel="stylesheet" media="not screen and (orientation: portrait)" href="portraitscreen.
css" />
媒體查詢列表：查詢列表中的任意一個查詢為真，則載入檔案。
全部查詢都不為真，則不載入。
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width:
800px), projection" href="800wide-portrait-screen.css" />

媒體主要特性

• width：視口寬度。
• height：視口高度。
• device-width：渲染表面的寬度（對我們來說，就是裝置螢幕的寬度）。
• device-height：渲染表面的高度（對我們來說，就是裝置螢幕的高度）。
• orientation：檢查裝置處於橫向還是縱向。
• aspect-ratio：基於視口寬度和高度的寬高比。一個16∶9 比例的顯示屏可以這樣定義aspect-ratio: 16/9。
• device-aspect-ratio：和aspect-ratio 類似，基於裝置渲染平面寬度和高度的寬高比。
• color：每種顏色的位數。例如min-color: 16 會檢測裝置是否擁有16 位顏色。
• color-index：裝置的顏色索引表中的顏色數。值必須是非負整數。
• monochrome：檢測單色幀緩衝區中每畫素所使用的位數。值必須是非負整數，如monochrome: 2。
• resolution：用來檢測螢幕或印表機的解析度，如min-resolution: 300dpi。還可以接受每釐米畫素點數的度量值，如min-resolution: 118dpcm。
• scan：電視機的掃描方式，值可設為progressive（逐行掃描）或interlace（隔行掃描）。如720p HD 電視（720p 的p 即表明是逐行掃描）匹配scan: progressive，而1080i HD 電視（1080i 中的i 表明是隔行掃描）匹配scan: interlace。
• grid：用來檢測輸出裝置是網格裝置還是點陣圖裝置。
• 除scan 和grid 之外，都可使用min 和max 字首來建立一個查詢範圍。

建議：

• Respond.js讓不支援css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支援查詢。
• CSS重置樣式：normalize.css

保證圖片儘可能精簡（base64）

時刻謹記，我們要保證程式碼和資料都儘可能精簡，以便為頻寬有限的使用者提供愉悅的體驗。

阻止移動瀏覽器自動調整頁面大小

• iOS 和Android 瀏覽器都基於核心

最常用寫法
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

width:可視區域的寬度，值可為數字或關鍵詞device-width
 height:同width
 intial-scale:頁面首次被顯示是可視區域的縮放級別，取值1.0則頁面按實際尺寸顯示，無任何縮放
 maximum-scale=1.0, minimum-scale=1.0;可視區域的縮放級別，
maximum-scale使用者可將頁面放大的程式，1.0將禁止使用者放大到實際尺寸之上。
 user-scalable:是否可對頁面進行縮放，no 禁止縮放(很少用到)

針對不同視口寬度修正設計

平板裝置（如iPad）增加媒體查詢，豎直iPad 的視口
寬度是768 畫素

@media screen and (max-width: 768px) {
#wrapper {
width: 768px;
}
#header,#footer,#navigation {
width: 748px;
}
}

自適應佈局缺點

頁面捕捉到媒體查詢設定的斷點，然後佈局發生變化。但在
捕捉到下一個視口斷點之前，頁面靜止不變
它不能適應未來的變化。

響應式佈局：固定佈局->流動佈局

伊桑·馬科特提供一個簡易可行的公式，將固定畫素寬度轉換對應的百分比寬度：
（目標元素寬度-邊框寬度）÷上下文（父級）元素寬度=百分比寬度
注意上下文的對應關係，頁面換行顯示（ul>li>a問題有可能是li的inline-block沒有寬的原因，我們可以使用margin來控，因為寬度不是很靈活）

#header {
margin-right: 10px;
margin-left: 10px;
width: 940px;
}

轉換

#wrapper {
margin-right: auto;
margin-left: auto;
width: 96%; /* 控制最外層的div */
}

#header {
margin-right: 10px;
margin-left: 10px;
width: 97.9166667%; /* 940 ÷ 960 */
}

關於數字四捨五入，黃金分割率約為1:1.61803398874989怎麼看它都不是一個簡潔的數字，但是它非常重要。黃
金分割率的測量都能做到如此精確，那我相信網頁設計同樣做得到。

用em(繼承父級),rem（直接繼承祖宗）替換px

em指的是特定字母的寬度和高度相對於特定字型磅值的比例。
- 現代瀏覽器的預設文字大小都是16 畫素
- 優點：
- 使用Internet Explorer 6 的使用者也將能夠縮放文字
- 以使我們設計師和開發者的生活更簡單

給body設定
font-size: 100%;
font-size: 16px;
font-size: 1em;
缺點：每次使用font-size時，都要需求字型大小px/16 = 字型大小 em
不過我推薦使用
font-size:62.5% 

#content h1 {
font-family: Arial, Helvetica, Verdana, sans-serif;
text-transform: uppercase;
font-size: 4.3125em; } /* 69 ÷ 16 */
#content h1 span {
display: block;
line-height: 1.052631579em; /* 40 ÷ 38 */
color: #757474;
font-size: .550724638em; /* 38 ÷ 69 */
}

行高的轉換相對於其本身的文字大小而言

彈性圖片

在現代瀏覽器（包括IE 7+）中要實現圖片隨著流動佈局相應縮放非常簡單。

為特定圖片指定特定規則

img,object,video,embed {
方法一（利用重寫和覆蓋）：
max-width: 100%;
max-width: 45%;
方法二：
width:百分比顯示
max-width: 202px;給彈性圖片設定閾值
}

• 注意刪除寬度和高度屬性
• 缺點：
  
  • 要提前準備一張足夠大的圖片，以備大視口使用
  • 頻寬限制

限制頁面無限制擴張

給最外層的div設定max-width 屬性
#wrapper {
margin-right: auto;
margin-left: auto;
width: 96%; /* Holding outermost DIV */
max-width: 1414px;
}

為不同的螢幕尺寸提供不同大小的圖片

AdaptiveImages:圖片自適應原始碼工具是一個基於PHP語言編寫的圖片自適應解決方案，它首先利用一個輕量級的JS檔案來探測瀏覽器的螢幕大小，然後將這個引數傳送到伺服器端的PHP指令碼來對圖片進行尺寸調整。
實現 Adaptive Images 解決方案需要Apache 2、PHP 5.x 和GD 庫，也就是說需要Web 伺服器端程式設計。首先，在其網站上下載.zip 檔案開始配置：
js被禁用的情況下依然有效
1. 解壓檔案，然後將其中的adaptive-images.php 和.htaccess 檔案拷貝到網站的根目錄。如果你網站的根目錄下已經有一個.htaccess 檔案了，不要覆蓋它。參考下載包中的instructions.htm 檔案看看怎麼做合適。

1. 接著在網站根目錄下建立一個名為ai-cache 的資料夾。
2. 然後把如下JavaScript 程式碼複製到每個需要自適應圖片的網頁的頭部：
   h5版本

<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+';
path=/';/script>

h5以下（新增type）

<script type="text/javascript">document.cookie='resolution='+Math.maxscreen.width,
screen.height)+'; path=/';</script>

切記這段JavaScript 程式碼要放在頁面頭部（最好作為第一個指令碼），因為它需要在頁面載入完成之前，而且要在發出圖片請求之前執行。

<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
# Adaptive-Images ------------------------------------------------------
RewriteCond %{REQUEST_URI} andthewinnerisnt讓網站根目錄下名為andthewinnerisnt 的資料夾中的圖片被縮放
# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories
# to adaptive-images.php so we can select appropriately sized versions
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php
# END Adaptive-Images --------------------------------------------------
</IfModule>

流動網格佈局和媒體查詢的默契配合

媒體查詢約束流動佈局的變動範圍，而流動佈局則簡化了從一組媒體查詢樣式過渡到另一組的改變過程。

HTML5（大家可以看我的另一篇文章）

膩子指令碼（polyfill）這個詞由Remy Sharp 提出，意指使用膩子來補平老版
本瀏覽器的缺陷。因此，膩子指令碼具體指的是一段能給老版本瀏覽器帶來
新特性的JavaScript 程式碼。

HTML5 樣板檔案。樣板檔案是一個預先做好的融
合了“最佳實踐”HTML5 檔案，包含一些基本樣式（如之前提到過的
normalize.css）、polyfill 和一些必要的工具如Modernizr。它還包含一個
自動合併CSS 和JS 檔案、自動刪除註釋以生成生產環境程式碼的構建工
具。強烈推薦！

HTML5 精簡主義

各種腦殘寫法都可以被瀏覽器識別
**沒有結束標籤的斜線，沒有引號，大小寫混雜。甚至，省略元素，
頁面依然有效**

<link href=CSS/main.css rel=stylesheet >
<div id=wrapper>
<img SRC=frontCarousel.png aLt=frontCarousel>

在編寫HTML5 文件時我傾向於在老式編寫風格（可讀性和精簡程式碼找到平衡）

<link href="CSS/main.css" rel="stylesheet"/>

HTML5 標籤巢狀多個

<h2><a href="index.html">The home page</a></h2>
<p><a href="index.html">This paragraph also links to the home page</a></p>
<a href="index.html"><img src="home-image.png" alt="home-slice" /></a>

Make change

<a href="index.html">
<h2>The home page</h2>
<p>This paragraph also links to the home page</p>
<img src="home-image.png" alt="home-slice" />
</a>

不能在一個標籤中巢狀另一個標籤，也不能在標籤中巢狀表單。
第一句不是很理解，什麼意思？

HTML5 棄其糟粕

都能使用，不過最好不要用，擁抱未來
- 暫保留
- <img src="frontCarousel.png" alt="frontCarousel" border="0" />
- 非保留的strike、enter、font、acronym、frame 和frameset。

HTML5 全新語義化元素(機器識別)

字典中對語義學的定義是“關注語言本質含義的語言學和邏輯學分支學科”.

• <section>元素用來定義文件或應用程式中的區域（或節）
• <nav>用來定義文件的主導航區域
• <article>元素用來包裹獨立的內容片段
• <aside>元素用來表示與頁面主內容鬆散相關的內容
• <hgroup>元素包裹使用

  、

  、

  等標籤的標題、標語和副標題

• <aside>元素用來表示與頁面主內容鬆散相關的內容
  
  • <header>元素包含對區域內容的介紹說明（不計入大綱結構，不能用於劃分內容結構。）
  • <footer>元素包含對區域內容的介紹說明（不計入大綱結構，不能用於劃分內容結構。）
  • <address>元素用於明確地標註離其最近的< article >或< body >祖先元素的聯絡資訊。

HTML5 的大綱結構

<hgroup>
    <h1>Ben's blog</h1>
    <h2>All about what I do</h2>
</hgroup>
<article>
    <header>
        <hgroup>
        <h1>A post about something</h1>
        <h2>Trust me this is a great read</h2>
        <h3>No, not really</h3>
        <p>See. Told you.</p>
        </hgroup>
    </header>
</article>

HTML5 文字級語義元素

<b>……一小段文字，純粹為了吸引人的注意，除此之外不傳達任何重要性，也不暗示其他語態或語氣，如文件摘要中的關鍵詞、評論中的產品名稱、互動式文字軟體中的可操作單詞，或者文章的導語。
根據過去對< b >標籤的用法，很多瀏覽器仍會將其渲染為粗體。所以你可以根據實際情況在相關的CSS 程式碼中重定義其預設樣式。

<em>強調內容中的重點。

<i>一小段有不同語態或語氣的文字，或者是樣子上與普通文章有所差異以便
標明不同特點的文字。 渲染成斜體，可以重寫樣式

遵循WAI-ARIA 實現無障礙站點

WAI-ARIA 是Web Accessibility Initiative - Accessible Rich Internet Applications 的縮寫，指無障礙網頁應用技術，它主要解決一個問題：讓殘障人士能無障礙地訪問網頁上的動態內容。這種技術提供了一種描述自定義元件（網頁應用中的動態片段）的角色、狀態和屬性的方法，這樣這些元件就可以被依賴輔助技術的使用者找到並加以利用。

ARIA地標屬性：role=”“

• application：用來定義用作網頁應用的區域。
• banner：用來定義一個站點級別（而不是某個特定文件的）的區域。如網站的頭部和logo。
• complementary：用來定義一個對頁面主要區域進行補充說明的區域。
• contentinfo：用來定義與頁面主要內容相關的資訊區域。例如頁尾的網站版權資訊區域。
• form：你猜都能猜到，定義表單！但注意，如果表單用於搜尋，則請使用search 來替代。
• main：定義頁面的主體內容。
• navigation：用來定義鏈向當前文件或相關文件的導航連結。
• search：用來定義一個用於搜尋的區域。

設定樣式nav[role=""] {}

HTML5 嵌入媒體

最初的 HTML5 規範呼籲所有瀏覽器內建支援使用Ogg 格式①直接播放視訊或音訊（無需外掛）。但是由於HTML5 工作組的內部爭議，曾經作為基線標準的支援Ogg（包括Theora video 和Vorbis audio）的主張在最近更新的HTML5 規範中被放棄。因此目前的情況是，一些瀏覽器支援某一套視訊和音訊檔案格式，而另一些瀏覽器則支援其他格式。例如Safari 只允許在和元素中使用MP4/H.264/AAC 媒體檔案，而Firefox 和Opera 則只支援Ogg 和WebM。

在一個標籤內支援多種媒體格式
<video width="640" height="480" controls autoplay preload="auto" loopposter="myVideoPoster.jpg">
<source src="video/myVideo.ogv" type="video/ogg">
<source src="video/myVideo.mp4" type="video/mp4">
What, do you mean you don't understand HTML5?
</video>

針對老版本瀏覽器的備用方案

<video width="640" height="480" controls autoplay preload="auto" loop poster=
"myVideoPoster.jpg">
<source src="video/myVideo.mp4" type="video/mp4">
<source src="video/myVideo.ogv" type="video/ogg">
<object width="640" height="480" type="application/x-shockwave-flash"
data="myFlashVideo.SWF">
<param name="movie" value="myFlashVideo.swf" />
<param name="flashvars" value="controlbar=over&amp;image=myVideoPoster.
jpg&amp; file=video/myVideo.mp4" />
<img src="myVideoPoster.jpg" width="640" height="480" alt="__TITLE__"
title="No video playback capabilities, please download the video below" />
</object>
<p> <b>Download Video:</b>
MP4 Format: <a href="myVideo.mp4">"MP4"</a>
Ogg Format: <a href="myVideo.ogv">"Ogg"</a>
</p>
</video>

響應式視訊

video { max-width: 100%; height: auto; }

能解決使用iframe 嵌入的視訊的響應問題

FitVids檔案
<script>
$(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$("#content").fitVids();
});
</script>

離線Web 應用

離線Web應用的執行機制是每個需要離線使用的網頁都指定一個字尾名為.manifest 的
文字檔案。這個文字檔案羅列了該網頁離線使用時所需的所有資原始檔（HTML、圖片
JavaScript 等等）。支援離線Web 應用的瀏覽器會自動讀取.manifest 檔案，下載檔案中
所羅列的資原始檔，並將其快取在本地以備網路斷開時使用。

<html lang="en" manifest="/offline.manifest" />

修改.htaccess 檔案

AddType text/cache-manifest .manifest

阻止瀏覽器快取 快取檔案offline.manifest

<Files offline.manifest>
ExpiresActive On
ExpiresDefault "access"
</Files>

offline.manifest 填充內容

CACHE MANIFEST
#v1
CACHE:
basic_page_layout_ch4.html
css/main.css
img/atwiNavBg.png
img/kingHong.jpg
img/midnightRun.jpg
img/moulinRouge.jpg
img/oscar.png
img/wyattEarp.jpg
img/buntingSlice3Invert.png
img/buntingSlice3.png
NETWORK:
*
FALLBACK:
//offline.html

• manifest 檔案必須以CACHE MANIFEST 開頭。
• CACHE:部分羅列了所有離線使用所需的檔案。這些檔案的路徑都是相對offline.manifest而言的
• NETWORK:部分羅列了所有不需要被快取的檔案。星號被稱為線上白名單萬用字元。
• FALLBACK:部分使用/字元定義了一個URL 模板。它的作用是訪問每個頁面時都會問“快取中有這個頁面嗎？”，如果有則顯示快取頁面，如果沒有則顯示指定的offline.html 檔案。
  版本號的作用
  

如果開發者對網站內容或資源做了修改，那麼也得通知瀏覽器更新快取文
件，否則瀏覽器仍然會使用之前已有的快取檔案。而通知瀏覽器更新快取檔案的方式通常是更新manifest 檔案，
瀏覽器如果發現manifest 檔案發生了變化，就會更新快取檔案。大多數情況下manifest 中的快取檔案清單不會發
生變化，那我們就通過修改註釋的方式來改變manifest 檔案，註釋中的版本號，既能觸發檔案變化，又能指明當
前版本，一舉兩得。其實註釋中還可以加入更新時間等更詳細資訊，有助於維護。

頁面被自動載入到離線快取

CACHE MANIFEST
# Cache Manifest v1
FALLBACK:
//offline.html
NETWORK:
*

這種方法只會下載和快取使用者訪問的HTML 頁面，
不會快取頁面內引入的圖片、JavaScript 或者其他資原始檔

CSS3：選擇器、字型和顏色模式（以後寫，累了）