自适应布局---自适应宽度

在网页代码的头部，加入一行viewport元标签。

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。

字体自适应：

字体也不能使用绝对大小（px），而只能使用相对大小（em）。body {font: normal 100% Helvetica, Arial, sans-serif;}

上面的代码指定，字体大小是页面默认大小的100%，即16像素。h1 {font-size: 1.5em;}

然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。small {font-size: 0.875em;}

small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。

图片自适应：

这只要一行CSS代码：img { max-width: 100%;}

这行代码对于大多数嵌入网页的视频也有效，所以可以写成：img, object { max-width: 100%;}

老版本的IE不支持max-width，所以只好写成：img { width: 100%; }

流动布局：和bootstrap的栅格模型一个意思

1. .main {float: right;width: 70%;}
2. .leftBar {float: left;width: 25%;}
3. float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
   

CSS的@media规则

同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。

 
   
   
   
   

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