响应式布局编码

允许网页宽度自动调整

加入viewport元标签：

<meta name="viewport" content="width=device-width, initial-scale=1" />

width=device-网页宽度等于浏览器内部宽度

initial-scale=1:网页占屏幕面积的100%

让IE6-IE8兼容HTML5和CSS3

<!--[if lt IE 9]>
 <script src="js/html5shiv.js"></script>
    <script src="js/respond.src.js"></script>
    <![endif]-->

不使用绝对宽度
x% ;

或者

auto;

相对大小的字体：不适用px，而是使用em

指定字体大小是页面默认大小的100%

body{

　　font: normal 100% Helvetica, Arial, sans-serif;

}

指定h1的大小是默认大小的1.5倍

h1{

　　font-size:1.5em;

}

使用流动布局：并使用float使宽度太小时后面的元素滚动到下方，避免滚动条出现

.main{

　　float: right;

　　70%;

}

.leftBar{

　　float: left;

　　25%;

}

选择加载CSS:使用媒体查询实现

探测屏幕宽度，加载相应的CSS文件。

如果屏幕宽度小于400像素（max-device- 400px），就加载tinyScreen.css文件。

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

如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。

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

CSS内部加载：

在CSS文件内加载css文件

@import url("tinyScreen.css") screen and (max-device- 400px);

为某分辨率范围设置CSS规则

@media screen and (max-device- 400px) {

　　.column { 　　　　　　

　　　　float: none; 　　　　　　

　　　　auto; 　　　　

　　}

　　#sidebar { 　　　　　　

　　　　display:none; 　　　　

　　}

}

图片大小相对：img{max- 100%;}