布局

分栏布局/多列布局

 

column-width    　  栏宽度

column-count    　  栏数

column-gap        　 栏间距

column-rule     　　 栏线（1px solid red）

column-span:all　　 跨栏（新闻标题横向跨栏）

 

*必须给栏宽度，不然无法生效

*栏之间有默认间距，总宽度要大于分栏宽度乘以分栏宽度

*文本居中 text-align：center

*多媒体元素和文本元素间距解析不一样

 

 

 

 

*******************************

响应式布局

 

 

 

 

 

 

 

优势：

*多终端视觉和操作体验风格统一

*兼容当前及未来新设备

*节约了开发成本，维护成本也降低很多

 

不足：

*兼容性：低版本浏览器兼容性有问题

*移动宽带流量：相比较手机定制网站，流量稍大，但比较加载一个完整PC端网站小很多（pc/ipad端比较多）

*大妈累赘，隐藏无用的元素会出现，加载时间长

*在设计初期就要考虑页面如何在多终端显示，兼容各种设备工作量大，比较费时间

 

总结：重视功能的不要用响应式布局，重视内容的用响应式布局。

　　　根据不同屏幕尺寸做不同样式的布局。