第一章 响应式设计之Media Quer
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第一章 响应式设计之Media Quer相关的知识，希望对你有一定的参考价值。
书里谈到尽量不要使用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的主要内容，如果未能解决你的问题，请参考以下文章