[html5]流动布局(fluidgrid)实现移动端适配？

“流动布局”的含义是，各个区块的位置都是浮动的，不是固定不变的。

.main{ 
　　float:right; 
　　width:70%; 
　　} 
　　.leftBar{ 
　　float:left; 
　　width:25%; 
　　} 

float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow(溢出)，避免了水平滚动条的出现。 另外，绝对定位(position:absolute)的使用，也要非常小心。

选择加载CSS

“自适应网页设计”的核心就是CSS3引入的MediaQuery模块，它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。
 

media=”screenand(max-device-width:400px)” 
　　href=”tinyScreen.css”/> 

上面的代码意思是，如果屏幕宽度小于400像素(max-device-width:400px)，就加载tinyScreen.css文件。

media=”screenand(min-width:400px)and(max-device-width:600px)” 
　　href=”smallScreen.css”/> 

如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。 除了用html标签加载CSS文件，还可以在现有CSS文件中加载。

CSS的@media规则

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

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

上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动(float:none)、宽度自动调节(width:auto)，sidebar块不显示(display:none)。