创建自适应网页

网页适配

1.允许网页宽度自动调整

<meta name='viewpore' content="width=device-width,initial-scale=1">

2.不适用绝对宽度

1.css代码不能指定像素宽度
width:xxx px
只能制定百分比宽度
width:xx%
或者
width:auto

3.相对字体的大小

body{
font:normal 100% Arial
}

上面的代码指定，字体大小是页面默认大小的100%,即16像素

h1{
font-size:1.5em;
}

然后h1的大小是默认大小的1.5倍,即24像素

４.流动布局

路东布局的含义是各个区块的位置都是浮动的，不是固定不变的

.main{
float:right;
width:70%;
}

float的好处是，如果页面宽度太小，放不下两个元素，后面的元素会滚到下方，不会在水平方向出现溢出，避免的水平滚动条的出现.

5.谨慎是用绝对定位

6,自适应网页射击的核心，就是css3引入的Media_Query模块．

它的意思就是自动检测屏幕宽度，然后加载相应的css文件

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

7.css的@media规则
同一个css文件中，也可以根据不同的分辨率，选择应用不同的css规则

@media screen and (min-device-width:400px){
.col{
float:left;
width:auto;
}

}

8.图片的自适应

自适应网页设计必须实现图片的自动缩放
其实只需要一行代码

img{max-width:100%}

老版本的IE不支持max-width,只好写成

img{width:100%}