码迷,mamicode.com
首页 > 其他好文 > 详细

第一章 响应式设计之Media Quer

时间:2016-07-04 23:43:35      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:

书里谈到尽量不要使用Media Queriy。 但是过多使用media query,会导致CSS变得脆弱和页面难以维护。一些方法可以减少页面使用 media query.

响应式设计:

(1) 使用百分比替换固定的宽度。如果不行,也尽量使用vw, vh, vmin, vmax。

(2) 使用max-width,而不使用width。

(3) 对于一些元素,如img, object, video, iframe, 使用max-width: 100%。

(4) 如果背景图片要完全覆盖容器,可以使用background-size: cover。

(5) 当要在表格的行和列中对图片或其他元素进行布局时,可以使用Flexbox布局或者display: inline-block。

(6) 使用多列文本时,使用column-width替换column-count

 

总结: 尽量使用流布局和相对大小。

(对flexbox布局, 和css3属性还要多做了解额)

第一章 响应式设计之Media Quer

标签:

原文地址:http://www.cnblogs.com/JennyZhang/p/5641905.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!