·您当前的位置:首页 > 技术教程 > Html5技术 >

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

时间:2017-08-30 18:06酷播
[html5]流动布局(fluidgrid),流动布局的含义是,各个区块的位置都是浮动的,不是固定不变的。

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

  1. .main{ 
  2.   float:right; 
  3.   width:70%; 
  4.   } 
  5.   .leftBar{ 
  6.   float:left; 
  7.   width:25%; 
  8.   } 

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

选择加载CSS

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

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

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

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

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

CSS的@media规则

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

  1. @mediascreenand(max-device-width:400px){ 
  2.   .column{ 
  3.   float:none; 
  4.   width:auto; 
  5.   } 
  6.   #sidebar{ 
  7.   display:none; 
  8.   } 
  9.   } 

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

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器