S1-响应式设计

  • 简单定义

    • 一份代码能够适应全部屏幕尺寸

  • 响应式三要素

    • 第一，弹性布局；
    • 第二，弹性图片；
    • 第三，media 查询。
四种响应模式

  • Column Drop 列下沉

    • 手机上每一个大块单独占据一行，随着屏幕尺寸拉伸会在同一行上形成多个 column 列

  • Mostly Fulid

    • 基本上跟 Column Drop 一样，但是有一点点“固定布局“的特点：当到达一定宽度后，主体内容部分不再变宽，成为固定宽度。

  • Layout Shifter

    • 变换式，也就是不必遵循原有内容顺序，可以根据最佳展示需要来调整大块顺序。

  • Off Canvas

    • 抽屉式，屏幕不够宽的时候，隐藏，通过按钮呼出。足够宽的屏幕上，始终显示。
viewport设置
<meta name="viewport" content="width=device-width">
  • 但是更为常见的设置是：
<meta name="viewport" content="width=device-width, initial-scale=1">

很多知名的网站都是用了上面的设置，例如 http://alistapart.com/ ，

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容