CSS3响应式设计

响应式网页设计

1、打开浏览器思维定式

a.了解某些页面显示效果在旧版浏览器中细微的差别。

b.在旧版浏览器中让页面元素表现一致会使网站增加大量图片，从而使网站的加载速度变慢，增加制作成本。

c.现代浏览器可以通过更为简洁的代码来快速的构建网站。

2、媒体查询

又媒体类型和一个或多个检测媒体特性的条件表达式组成，根据每个设备的特性，在不改变页面内容的情况下，为特定设备设置的CSS样式。

2.1基本语法

根据当前屏幕的大小显示不同的效果：

@media screen and (max-width: 1024px) {  body {background-color: blue; }
}
@media screen and (max-width: 768px) {   body {background-color: orange; }
}
@media screen and (max-width: 480px) {   body {background-color: yellow; }
}
@media screen and (max-width: 320px) {   body { background-color: green; }
}

向HTML页面中插入一个link标签

<link rel="stylesheet" type="text/css" media="screen" href="screen-styles.css">

检查屏幕是否纵向放置：

纵向放置时则会加载 portrait-screen.css 样式表

<link rel="stylesheet" media="screen and (orientation: portrait)" href="portrait- screen.css" />

将表达式组合起来，限制平屏幕的宽度：

<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 1024px)" href="800wide-portrait-screen.css" />

使用@import指令映入其他的样式表：

@import url("phone.css") screen and (max-width:480px);

但是，使用@import方式会增加http的请求次数，影响页面的加载速度。

2.2媒体查询检测的特性

width：浏览器的宽度。

height：浏览器的高度。

device-width：设备屏幕的宽度。 

device-height：设备屏幕的高度。 

orientation：检查设备处于横向还是纵向。 

aspect-ratio：基于浏览器可视宽度和高度的宽高比。（例如aspect-ratio: 16/9）。

device-aspect-ratio：检测设备宽度和高度的宽高比。 

color：每种颜色的位数。例如 min-color: 16 会检测设备是否拥有 16位颜色。 

color-index：设备的颜色索引表中的颜色数。值必须是非负整数。 

monochrome：检测单色帧缓冲区中每像素所使用的位数。值必须是非负整数。

resolution：用来检测屏幕或打印机的分辨率，如 min-resolution: 300dpi。还 可以接受每厘米像素点数的度量值，如 min-resolution: 118dpcm。

scan：电视机的扫描方式，值可设为 progressive（逐行扫描）或 interlace（隔 行扫描）。

grid：用来检测输出设备是网格设备还是位图设备。

例如，下面的代码限制了phone.css文件只会引入到480px~640px的设备。

@import url("phone.css") screen and (min-width:480px) and (max-width:640px);

3、使用百分比布局

百分比宽度 =目标元素宽度/上下文元素宽度

例如，#header（目标元素）被包裹在 #wrapper（上下文元素）中。因此，我们用#header 的宽度 940像素，来除以上下文元

素（#wrapper）的宽度 960 像素，结果是 0.979166667。

4、用em来替换px

em是相对于其上下文的字体大小而言。

浏览器的默认文字尺寸大小为16px。

文字尺寸=目标文字尺寸/上下文尺寸

5、网格布局与媒体查询相结合

下面的代码，通过改变窗口的宽度来改变文字的大小，从而使导航不会被挤到下一行。

@media screen and (min-width: 1001px) and (max-width: 1080px) {
#navigation ul li a { font-size: 1.4em; } }
@media screen and (min-width: 805px) and (max-width: 1000px) {
#navigation ul li a { font-size: 1.25em; } }
@media screen and (min-width: 769px) and (max-width: 804px) {
#navigation ul li a { font-size: 1.1em; } }