zoukankan      html  css  js  c++  java
  • 第一章 响应式设计之Media Quer

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

    响应式设计:

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

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

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

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

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

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

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

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

  • 相关阅读:
    js-20170816-Date对象
    js-20170804-Math对象
    js-20170619-string对象
    微信web开发者工具
    前端开发指南
    接口调试工具DHC
    CSS预处理器
    Weex
    Vue.js
    hbuilder
  • 原文地址:https://www.cnblogs.com/JennyZhang/p/5641905.html
Copyright © 2011-2022 走看看