允许网页宽度自动调整

加入viewport元标签：

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

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

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

让IE6-IE8兼容HTML5和CSS3

不使用绝对宽度

width: x% ;

或者

width:auto;

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

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

body{

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

}

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

h1{

　　font-size:1.5em;

}

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

.main{

　　float: right;

　　width:70%;

}

.leftBar{

　　float: left;

　　width:25%;

}

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

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

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

<link rel="stylesheet" type="text/css"

　　　　media="screen and (max-device-width: 400px)"

　　　　href="tinyScreen.css" />

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

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

CSS内部加载：

在CSS文件内加载css文件

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

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

 

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

　　.column { 　　　　　　

　　　　float: none; 　　　　　　

　　　　width:auto; 　　　　

　　}

　　#sidebar { 　　　　　　

　　　　display:none; 　　　　

　　}

}

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