网页自适应

1.文档

允许网页宽度自动调整

<meta name="viewport" content="width=device-width, initial-scale=1" />   //网页的原始比例即为屏幕的大小，IE9+

viewport元标签：网页的默认宽度，

width=device-width,是说网页的初始宽度等于屏幕的宽度，

initial-scale = 1,缩放比例为1倍

兼容ie老版本需要支持

<!--[if lt IE 9]>
　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

<![endif]-->

2.加载css

css3-Media Query选择性加载css

link标签

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

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

css文件中引入

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

css文件中@media 关键字

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

3.布局

建议多使用流动布局，元素的定位是浮动的，float:right 等

.section{ width:75%;float:left; }

4.宽度

定义容器的宽度时不使用绝对的宽度像素值

width:150px; ------ say no

width:20%;    ------ say yes

width:auto;    ------ say yes

5.字体大小

字体的大小使用相对大小单位 em 而不使用绝对大小 px;

设置网页字体的相对大小

body { font: normal 100% Helvetica, Arial, sans-serif; }  //字体大小是页面默认大小的100%，为16个像素。

设置字体的大小的时候，计算为em大小，如想设置字体大小为 32px 则 换算为em单位 font-size:2em;

6.图片、自媒体

img, object { max-width: 100%;}   //图片的自适应，自动缩放

img{width:100%} //兼容老IE

img { -ms-interpolation-mode: bicubic; } //防止图片失真

imgSizer.js。