跳到主要内容

响应式布局

响应式布局​

  • RWD，responsive web design；设计适应不同屏幕宽度的网页

媒体查询​

@media media-type and (media-feature-rule) {
  /* 这里放对应规则的CSS */
}

/* 当屏幕宽度小于640px时，footer的高度变为50px */
@media screen and (max-width: 640px) {
  footer {
    min-height: 50px;
    max-height: 50px;
  }
}
媒体类型（media-type）​
值解释
media = all默认值，适用于所有设备
media = print适用于在打印预览模式下在屏幕上查看的分页材料和文档
media = screen主要用于屏幕
media = speech主要用于语音合成器
逻辑操作符​
值解释
and将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真
not否定媒体查询，如果使用not运算符，则还必须指定媒体类型
only仅在整个查询匹配时才用于应用样式，如果使用only运算符，则还必须指定媒体类型
,逗号，作用类似于or，如果列表中的任何查询为 true，则整个 media 语句均返回 true
媒体特性（media-feature-rule）​

  • 媒体特性（Media features）描述了 user agent、输出设备，或是浏览环境的具体特征

  • 每条媒体特性表达式都必须用括号括起来

值解释
min-width所有大于这个宽度的设备
max-width所有小于这个宽度的设备
aspect-ratio视窗（viewport）的宽高比，不一定是浏览器窗口大小，可能是一个 iframe
width视窗（viewport）的宽度，包括纵向滚动条的宽度
orientation视窗（viewport）的旋转方向
hover主要输入模式是否允许用户在元素上悬停；因为触摸屏和键盘导航是没法实现悬浮的
any-hover是否有任何可用的输入机制允许用户（将鼠标等）悬停在元素上

弹性盒、网格和多栏布局​

  • 弹性盒、网格和多栏布局都给了你建立可伸缩的甚至是响应式组件的方式，而不需要媒体查询

  • 使用多列布局column-xxx等属性；

  • 使用flexbox伸缩盒布局

  • 使用grid布局

响应式排版​

  • 使用字体相对长度单位em和rem
  • 使用视口单位vw来实现响应式排版，1vw等同于视口宽度的百分之一；目前，主流方式已经从rem变为使用vw和vh进行响应式布局；

视口元标签​

  • 使用meta标签告诉移动端浏览器，它们应该将视口宽度设定为设备的宽度，将文档放大到其预期大小的 100%
<meta
  name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=1"
/>