視口：瀏覽器窗口內(nèi)的內(nèi)容區(qū)域，不包含工具欄，標(biāo)簽欄。網(wǎng)頁實(shí)際顯示.
屏幕尺寸：設(shè)備物理顯示區(qū)域

各種寬度和高度a、可視區(qū)的真實(shí)寬度和高度document.documentElement.clientWidth document.documentElement.clientHeight都去掉滾動條的大小（一般是17像素），比如我的dell筆記本在chrome下，正常的可視區(qū)（即無滾動條）大小是1366*663，假如水平和垂直方向都有滾動條的話，這兩個值的大小為 1349 * 646b、document.documentElement.offsetWidth 無滾動條 1366 有滾動條 1349 同adocument.documentElement.offsetHeight 根據(jù)實(shí)際的html元素被撐開的大小c、window.innerWidth / window.innerHeight （1）有滾動條 document.documentElement.clientWidth + 滾動條寬度（2）無滾動條 等于document.documentElement.clientWidth高度計(jì)算規(guī)則同寬度

響應(yīng)式方法論

• 先針對小視口設(shè)計(jì)
• 然后逐步對大視口漸進(jìn)增強(qiáng)
• 響應(yīng)式設(shè)計(jì)中內(nèi)容始終優(yōu)先
• 流動布局、彈性圖片和媒體查詢：使用百分比布局創(chuàng)建流動的彈性界面，同時使用媒體查詢來限制元素的變動范圍。（平滑過渡）

HTML5的時代

• 簡化標(biāo)簽
• 語義化標(biāo)簽
• CSS3(圓角，漸變…..)

-webkit-,-moz-是各廠商發(fā)布正式版本之前，實(shí)驗(yàn)各自對css3新特性的實(shí)現(xiàn)

業(yè)務(wù)需求和預(yù)算的考慮

• 客戶是否想支持互聯(lián)網(wǎng)用戶增長最迅猛的市場？如果想，那響應(yīng)式方法就很適合。
• 客戶是否想要最簡潔、快速，且易于維護(hù)的代碼？如果想，那響應(yīng)式方法就很適合。
• 客戶能否理解用戶體驗(yàn)可以且本應(yīng)該根據(jù)瀏覽器不同而不同？如果可以理解，那響應(yīng)式方法就很適合。
• 客戶是否要求設(shè)計(jì)效果在所有瀏覽器中都保持一致，包括IE 8 以及更低版本？如果是，響應(yīng)式設(shè)計(jì)就不適合。
• 該網(wǎng)站的當(dāng)前或預(yù)期客戶中，是否有百分之七十以上的人可能使用Internet Explorer 8或者更低版本？如果是，則響應(yīng)式設(shè)計(jì)不適合。
• 在預(yù)算允許的情況下，一個完全定制的“移動”版網(wǎng)站比響應(yīng)式設(shè)計(jì)更適合。

網(wǎng)站不必在所有瀏覽器中表現(xiàn)一致

客戶->思維定式->說服引導(dǎo)（理由如下）

• 允許頁面顯示效果在老舊瀏覽器中有細(xì)微的差別，這樣可以使代碼更易維護(hù)，將來更新的成本也更低。
• 讓頁面元素在那些老舊瀏覽器（如Internet Explorer 8 及更低版本）中表現(xiàn)一致會導(dǎo)致網(wǎng)站增加大量的圖片。這會使網(wǎng)站變慢，制作成本變高，而且更難維護(hù)。
• 現(xiàn)代瀏覽器可以理解的簡潔代碼等同于更快速的網(wǎng)站。快速響應(yīng)的網(wǎng)站在搜索引擎中的評級高于慢騰騰的網(wǎng)站。
• 使用老舊瀏覽器的用戶越來越少，使用現(xiàn)代瀏覽器的用戶越來越多——我們應(yīng)該支持大多數(shù)！

媒體查詢

W3C規(guī)范審核：工作草案（Working Draft）->候選推薦標(biāo)準(zhǔn)（Candidate Recommendation）->提議推薦標(biāo)準(zhǔn)(Proposed
Recommendation)->幾年時間等待->W3C 推薦標(biāo)準(zhǔn)（REC)
- CSS3 是由很多附加模塊組合而成的。媒體查詢就是其中的一個模塊。
- 媒體查詢可以讓我們根據(jù)設(shè)備顯示器的特性為其設(shè)定CSS 樣式。

媒體查詢語法

CSS 樣式表中使用媒體查詢

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

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

通過標(biāo)簽的media 屬性為樣式表指定設(shè)備類型（如顯示屏或打印機(jī)）。

非縱向放置的顯示屏設(shè)備 <link rel="stylesheet" media="not screen and (orientation: portrait)" href="portraitscreen. css" /> 媒體查詢列表：查詢列表中的任意一個查詢?yōu)檎?#xff0c;則加載文件。 全部查詢都不為真，則不加載。 <link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px), projection" href="800wide-portrait-screen.css" />

媒體主要特性

• width：視口寬度。
• height：視口高度。
• device-width：渲染表面的寬度（對我們來說，就是設(shè)備屏幕的寬度）。
• device-height：渲染表面的高度（對我們來說，就是設(shè)備屏幕的高度）。
• orientation：檢查設(shè)備處于橫向還是縱向。
• aspect-ratio：基于視口寬度和高度的寬高比。一個16∶9 比例的顯示屏可以這樣定義aspect-ratio: 16/9。
• device-aspect-ratio：和aspect-ratio 類似，基于設(shè)備渲染平面寬度和高度的寬高比。
• color：每種顏色的位數(shù)。例如min-color: 16 會檢測設(shè)備是否擁有16 位顏色。
• color-index：設(shè)備的顏色索引表中的顏色數(shù)。值必須是非負(fù)整數(shù)。
• monochrome：檢測單色幀緩沖區(qū)中每像素所使用的位數(shù)。值必須是非負(fù)整數(shù)，如monochrome: 2。
• resolution：用來檢測屏幕或打印機(jī)的分辨率，如min-resolution: 300dpi。還可以接受每厘米像素點(diǎn)數(shù)的度量值，如min-resolution: 118dpcm。
• scan：電視機(jī)的掃描方式，值可設(shè)為progressive（逐行掃描）或interlace（隔行掃描）。如720p HD 電視（720p 的p 即表明是逐行掃描）匹配scan: progressive，而1080i HD 電視（1080i 中的i 表明是隔行掃描）匹配scan: interlace。
• grid：用來檢測輸出設(shè)備是網(wǎng)格設(shè)備還是位圖設(shè)備。
• 除scan 和grid 之外，都可使用min 和max 前綴來創(chuàng)建一個查詢范圍。

建議：

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

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

時刻謹(jǐn)記，我們要保證代碼和數(shù)據(jù)都盡可能精簡，以便為帶寬有限的用戶提供愉悅的體驗(yàn)。

阻止移動瀏覽器自動調(diào)整頁面大小

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

最常用寫法 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> width:可視區(qū)域的寬度，值可為數(shù)字或關(guān)鍵詞device-widthheight:同widthintial-scale:頁面首次被顯示是可視區(qū)域的縮放級別，取值1.0則頁面按實(shí)際尺寸顯示，無任何縮放maximum-scale=1.0, minimum-scale=1.0;可視區(qū)域的縮放級別， maximum-scale用戶可將頁面放大的程序，1.0將禁止用戶放大到實(shí)際尺寸之上。user-scalable:是否可對頁面進(jìn)行縮放，no 禁止縮放(很少用到)

針對不同視口寬度修正設(shè)計(jì)

平板設(shè)備（如iPad）增加媒體查詢，豎直iPad 的視口
寬度是768 像素

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

自適應(yīng)布局缺點(diǎn)

頁面捕捉到媒體查詢設(shè)置的斷點(diǎn)，然后布局發(fā)生變化。但在
捕捉到下一個視口斷點(diǎn)之前，頁面靜止不變
它不能適應(yīng)未來的變化。

響應(yīng)式布局：固定布局->流動布局

伊桑·馬科特提供一個簡易可行的公式，將固定像素寬度轉(zhuǎn)換對應(yīng)的百分比寬度：
（目標(biāo)元素寬度-邊框?qū)挾?#xff09;÷上下文（父級）元素寬度=百分比寬度
注意上下文的對應(yīng)關(guān)系，頁面換行顯示（ul>li>a問題有可能是li的inline-block沒有寬的原因，我們可以使用margin來控，因?yàn)閷挾炔皇呛莒`活）

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

轉(zhuǎn)換

#wrapper { margin-right: auto; margin-left: auto; width: 96%; /* 控制最外層的div */ }#header { margin-right: 10px; margin-left: 10px; width: 97.9166667%; /* 940 ÷ 960 */ }

關(guān)于數(shù)字四舍五入，黃金分割率約為1:1.61803398874989怎么看它都不是一個簡潔的數(shù)字，但是它非常重要。黃
金分割率的測量都能做到如此精確，那我相信網(wǎng)頁設(shè)計(jì)同樣做得到。

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

em指的是特定字母的寬度和高度相對于特定字體磅值的比例。
- 現(xiàn)代瀏覽器的默認(rèn)文字大小都是16 像素
- 優(yōu)點(diǎn)：
- 使用Internet Explorer 6 的用戶也將能夠縮放文字
- 以使我們設(shè)計(jì)師和開發(fā)者的生活更簡單

給body設(shè)置 font-size: 100%; font-size: 16px; font-size: 1em; 缺點(diǎn)：每次使用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 */ }

行高的轉(zhuǎn)換相對于其本身的文字大小而言

彈性圖片

在現(xiàn)代瀏覽器（包括IE 7+）中要實(shí)現(xiàn)圖片隨著流動布局相應(yīng)縮放非常簡單。

為特定圖片指定特定規(guī)則

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

• 注意刪除寬度和高度屬性
• 缺點(diǎn)：
  
  • 要提前準(zhǔn)備一張足夠大的圖片，以備大視口使用
  • 帶寬限制

限制頁面無限制擴(kuò)張

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

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

AdaptiveImages:圖片自適應(yīng)源碼工具是一個基于PHP語言編寫的圖片自適應(yīng)解決方案，它首先利用一個輕量級的JS文件來探測瀏覽器的屏幕大小，然后將這個參數(shù)發(fā)送到服務(wù)器端的PHP腳本來對圖片進(jìn)行尺寸調(diào)整。
實(shí)現(xiàn) Adaptive Images 解決方案需要Apache 2、PHP 5.x 和GD 庫，也就是說需要Web 服務(wù)器端編程。首先，在其網(wǎng)站上下載.zip 文件開始配置：
js被禁用的情況下依然有效
1. 解壓文件，然后將其中的adaptive-images.php 和.htaccess 文件拷貝到網(wǎng)站的根目錄。如果你網(wǎng)站的根目錄下已經(jīng)有一個.htaccess 文件了，不要覆蓋它。參考下載包中的instructions.htm 文件看看怎么做合適。

接著在網(wǎng)站根目錄下創(chuàng)建一個名為ai-cache 的文件夾。

然后把如下JavaScript 代碼復(fù)制到每個需要自適應(yīng)圖片的網(wǎng)頁的頭部：
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 代碼要放在頁面頭部（最好作為第一個腳本），因?yàn)樗枰陧撁婕虞d完成之前，而且要在發(fā)出圖片請求之前運(yùn)行。

<IfModule mod_rewrite.c> Options +FollowSymlinks RewriteEngine On # Adaptive-Images ------------------------------------------------------ RewriteCond %{REQUEST_URI} andthewinnerisnt讓網(wǎng)站根目錄下名為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>

流動網(wǎng)格布局和媒體查詢的默契配合

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

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

膩?zhàn)幽_本（polyfill）這個詞由Remy Sharp 提出，意指使用膩?zhàn)觼硌a(bǔ)平老版
本瀏覽器的缺陷。因此，膩?zhàn)幽_本具體指的是一段能給老版本瀏覽器帶來
新特性的JavaScript 代碼。

HTML5 樣板文件。樣板文件是一個預(yù)先做好的融
合了“最佳實(shí)踐”HTML5 文件，包含一些基本樣式（如之前提到過的
normalize.css）、polyfill 和一些必要的工具如Modernizr。它還包含一個
自動合并CSS 和JS 文件、自動刪除注釋以生成生產(chǎn)環(huán)境代碼的構(gòu)建工
具。強(qiáng)烈推薦！

HTML5 精簡主義

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

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

在編寫HTML5 文檔時我傾向于在老式編寫風(fēng)格（可讀性和精簡代碼找到平衡）

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

HTML5 標(biāo)簽嵌套多個

<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>

不能在一個標(biāo)簽中嵌套另一個標(biāo)簽，也不能在標(biāo)簽中嵌套表單。
第一句不是很理解，什么意思？

HTML5 棄其糟粕

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

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

字典中對語義學(xué)的定義是“關(guān)注語言本質(zhì)含義的語言學(xué)和邏輯學(xué)分支學(xué)科”.

• <section>元素用來定義文檔或應(yīng)用程序中的區(qū)域（或節(jié)）
• <nav>用來定義文檔的主導(dǎo)航區(qū)域
• <article>元素用來包裹獨(dú)立的內(nèi)容片段
• <aside>元素用來表示與頁面主內(nèi)容松散相關(guān)的內(nèi)容
• <hgroup>元素包裹使用

  、

  、

  等標(biāo)簽的標(biāo)題、標(biāo)語和副標(biāo)題

• <aside>元素用來表示與頁面主內(nèi)容松散相關(guān)的內(nèi)容
  
  • <header>元素包含對區(qū)域內(nèi)容的介紹說明（不計(jì)入大綱結(jié)構(gòu)，不能用于劃分內(nèi)容結(jié)構(gòu)。）
  • <footer>元素包含對區(qū)域內(nèi)容的介紹說明（不計(jì)入大綱結(jié)構(gòu)，不能用于劃分內(nèi)容結(jié)構(gòu)。）
  • <address>元素用于明確地標(biāo)注離其最近的< article >或< body >祖先元素的聯(lián)系信息。

HTML5 的大綱結(jié)構(gòu)

<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>……一小段文本，純粹為了吸引人的注意，除此之外不傳達(dá)任何重要性，也不暗示其他語態(tài)或語氣，如文檔摘要中的關(guān)鍵詞、評論中的產(chǎn)品名稱、交互式文本軟件中的可操作單詞，或者文章的導(dǎo)語。
根據(jù)過去對< b >標(biāo)簽的用法，很多瀏覽器仍會將其渲染為粗體。所以你可以根據(jù)實(shí)際情況在相關(guān)的CSS 代碼中重定義其默認(rèn)樣式。

<em>強(qiáng)調(diào)內(nèi)容中的重點(diǎn)。

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

遵循WAI-ARIA 實(shí)現(xiàn)無障礙站點(diǎn)

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

ARIA地標(biāo)屬性：role=”“

• application：用來定義用作網(wǎng)頁應(yīng)用的區(qū)域。
• banner：用來定義一個站點(diǎn)級別（而不是某個特定文檔的）的區(qū)域。如網(wǎng)站的頭部和logo。
• complementary：用來定義一個對頁面主要區(qū)域進(jìn)行補(bǔ)充說明的區(qū)域。
• contentinfo：用來定義與頁面主要內(nèi)容相關(guān)的信息區(qū)域。例如頁腳的網(wǎng)站版權(quán)信息區(qū)域。
• form：你猜都能猜到，定義表單！但注意，如果表單用于搜索，則請使用search 來替代。
• main：定義頁面的主體內(nèi)容。
• navigation：用來定義鏈向當(dāng)前文檔或相關(guān)文檔的導(dǎo)航鏈接。
• search：用來定義一個用于搜索的區(qū)域。

設(shè)置樣式nav[role=""] {}

HTML5 嵌入媒體

最初的 HTML5 規(guī)范呼吁所有瀏覽器內(nèi)置支持使用Ogg 格式①直接播放視頻或音頻（無需插件）。但是由于HTML5 工作組的內(nèi)部爭議，曾經(jīng)作為基線標(biāo)準(zhǔn)的支持Ogg（包括Theora video 和Vorbis audio）的主張?jiān)谧罱碌腍TML5 規(guī)范中被放棄。因此目前的情況是，一些瀏覽器支持某一套視頻和音頻文件格式，而另一些瀏覽器則支持其他格式。例如Safari 只允許在和元素中使用MP4/H.264/AAC 媒體文件，而Firefox 和Opera 則只支持Ogg 和WebM。

在一個標(biāo)簽內(nèi)支持多種媒體格式 <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>

響應(yīng)式視頻

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

能解決使用iframe 嵌入的視頻的響應(yīng)問題

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

離線Web 應(yīng)用

離線Web應(yīng)用的運(yùn)行機(jī)制是每個需要離線使用的網(wǎng)頁都指定一個后綴名為.manifest 的
文本文件。這個文本文件羅列了該網(wǎng)頁離線使用時所需的所有資源文件（HTML、圖片
JavaScript 等等）。支持離線Web 應(yīng)用的瀏覽器會自動讀取.manifest 文件，下載文件中
所羅列的資源文件，并將其緩存在本地以備網(wǎng)絡(luò)斷開時使用。

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

修改.htaccess 文件

AddType text/cache-manifest .manifest

阻止瀏覽器緩存 緩存文件offline.manifest

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

offline.manifest 填充內(nèi)容

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 文件。
  版本號的作用
  

如果開發(fā)者對網(wǎng)站內(nèi)容或資源做了修改，那么也得通知瀏覽器更新緩存文
件，否則瀏覽器仍然會使用之前已有的緩存文件。而通知瀏覽器更新緩存文件的方式通常是更新manifest 文件，
瀏覽器如果發(fā)現(xiàn)manifest 文件發(fā)生了變化，就會更新緩存文件。大多數(shù)情況下manifest 中的緩存文件清單不會發(fā)
生變化，那我們就通過修改注釋的方式來改變manifest 文件，注釋中的版本號，既能觸發(fā)文件變化，又能指明當(dāng)
前版本，一舉兩得。其實(shí)注釋中還可以加入更新時間等更詳細(xì)信息，有助于維護(hù)。

頁面被自動加載到離線緩存

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

這種方法只會下載和緩存用戶訪問的HTML 頁面，
不會緩存頁面內(nèi)引入的圖片、JavaScript 或者其他資源文件

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

總結(jié)

以上是生活随笔為你收集整理的响应式Web设计：HTML5和CSS3实战（读书笔记）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。