《響應式Web設計：HTML5和CSS3實戰》 讀書筆記

第一章  響應式設計入門

　　直到如今網頁的設計還在960px，這種設計在一些低分辨率的顯示器正常，而在高分辨率下會留出兩邊空白.

 

1、佈局種類

　　一、流式佈局　　二、彈性佈局　　三、朔料佈局　　四、自適應佈局

 

2、視口和屏幕尺寸

　　視口：指瀏覽器內部的顯示內容的部分，不包括工具欄導航欄之類.

　　屏幕尺寸：指設備的尺寸，如顯示器、手機屏幕.

 

 

第二章  媒體查詢：支持不一樣的視口

 

 1 <style>
 2 /* 大於1024時執行下面代碼 */
 3 @media all and (min-width: 1024px) {
 4     .box { height:400px; background-color:#CCC; }
 5 }
 6 
 7 /* 小於768時執行下面代碼 */
 8 @media all and (max-width: 768px) {
 9     .box { height:200px; background-color:#E3D6BF; }
10 }
11 </style>