《响应式Web设计：HTML5和CSS3实战》 读书笔记

第一章  响应式设计入门

　　直到现在网页的设计还在960px，这种设计在一些低分辨率的显示器正常，而在高分辨率下会留出两边空白.

 

一、布局种类

　　1、流式布局　　2、弹性布局　　3、朔料布局　　4、自适应布局

 

二、视口和屏幕尺寸

　　视口：指浏览器内部的显示内容的部分，不包括工具栏导航栏之类.

　　屏幕尺寸：指设备的尺寸，如显示器、手机屏幕.

 

 

第二章  媒体查询：支持不同的视口

 

<style>
/* 大于1024时执行下面代码 */
@media all and (min-width: 1024px) {
    .box { height:400px; background-color:#CCC; }
}

/* 小于768时执行下面代码 */
@media all and (max-width: 768px) {
    .box { height:200px; background-color:#E3D6BF; }
}
</style>