响应式 web 设计

1.网页头

<metaname="viewport"content="width=device-width;  initial-scale=1.0">
<scriptsrc="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">script>

对于老式的浏览器(IE6,7,8)需要添加 css3-mediaqueries.js 兼容 IE9 的配置

2.不使用绝对宽度，只能使用百分比宽度

3.相对大小的字体

字体也不能使用绝对大小（px），而只能使用相对大小（em），如

font-size: 1.5em; 默认大小的1.5倍，即24像素

4.流动布局

所有块都是 float 浮动的,小心使用 position: absolute 绝对定位

5.CSS 的选择加载

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />

屏幕宽度小于 400 像素，就加载 tinyScreen.css 文件。如果屏幕宽度在 400 像素到 600 像素之间，则加载 smallScreen.css 文件，另外 CSS 内也可以根据屏幕宽度设置：

@media screen and (max-device-width: 400px) { .column  { float: none; width:auto; }  #sidebar  { display:none; } }

屏幕宽度小时 400PX 时触发动作:class=”column”的块取消浮动,宽度自动,id=”sidebar”的块隐藏

6.图片适应

img  { max-width: 100%;}  
img  { width: 100%; }  
img  { -ms-interpolation-mode: bicubic; }