1，CSS前處理器（Sass、LESS、Stylus、PostCSS）可以幫我們組 織程式碼、變數、顏色操作和數學運算。像PostCSS這樣的工具可以幫我們完成新增瀏覽器字首這 樣煩瑣的任務。另外，一些清理和驗證工具可以幫我們檢查HTML、CSS和JavaScript程式碼是否符 合標準，自動提示輸入錯誤和語法錯誤。  新

2，下載本書示例程式碼的地址是：http://rwd.education/download.zip或https://git- hub.com/benfrain/rwd

3，利用max-width:100%;可以使得圖片始終是自己原來大小的一倍，無論viewport如何變化（除非viewport比圖片自身還小，圖片會變得和視窗一樣大）。而width:100%;使得圖片始終佔滿螢幕。

4，首先是“基本的”樣式，它適用於任何裝置。在這個樣式基 礎上，我們再為不同視口、不同能力的裝置，漸進增加不同的視覺效果和功能

5，將容器設為display:table，則他成為一個塊級表格元素，子元素display:table-cell，則子元素成為表格單元格，然後就像在表格裡一樣，給子元素加個vertical-align: middle就可以使得多行文字垂直居中

6，媒體查詢：orientation:portriat螢幕是垂直的嗎

可以組合多個媒體查詢。只要其中任何一個媒體查詢表示式為真，就會應用樣式

 media="screen and (orientation: portrait) and (min-width: 800px), projection

7，可以在使用@import匯入CSS時使用媒體查詢，有條件地向當前樣式表中載入其他樣式表。 比如，以下程式碼會匯入樣式表phone.css，但條件是必須是螢幕裝置，而且視口不超過360畫素：  @import url("phone.css") screen and (max-width:360px); 記住，使用CSS中的@import會增加HTTP請求（進而影響載入速度），因此請慎用。 另外，使用link引入外部樣式表支援使用js控制DOM改變樣式，@import不行。

8，把媒體查詢寫在需要它的地方，而不是因為媒體查詢的條件相同就把他們組合到一起，這樣便於程式碼維護。而且，在標準樣式之後緊接著寫媒體查詢，根本用不著擔 心檔案大小，因為事實上gzip 壓縮（應該用它來壓縮伺服器上的所有可以壓縮的資源）完全可以把差別降到可以忽略不計的程 度。

9，content="initial-scale=2.0"的意思是“把內容放大為實際大小的兩倍”（0.5 就是一半，3.0就是三倍）。後，width=device-width告訴瀏覽器頁面的寬度等於裝置的寬度 （width=device-width）。maximum-scale=3, minimum-scale=0.5"允許使用者大將頁 面放大到裝置寬度的三倍，小可以將頁面縮小至裝置寬度的一半。user-scalable=no完全禁止使用者縮放

10，inline-block行內元素總是會產生不易消除的間隔：

*使得父級元素font-size:0;   子級元素font-size:16px;

*使得子級元素margin-right:-5px;

11，如何得到這樣的導航欄：

html:

<div class="nav"> <div class="list">home</div> <div class="list">about us</div> <div class="list">products</div> <div class="list">policy</div> <div class="last">contact us</div></div>

css:

div{ background-color:black; color:white; } .nav{display:flex; } .list{ margin-right:15px; } .last{margin-left:auto;//   auto使得最後一項左邊有多大空位置，margin-left就有多少距離 }