CSS Responsive Web Design

初发布于 01 Jun 2015 | in CSS

当你使用 CSS 和 HTML 通过重定义大小、隐藏、收缩、拉伸或者移动内容，使同一个域名下同一个网页在所有屏幕上看起来不错，这就叫做响应式设计。

响应式设计根据不同屏幕显示的需求，来调整网页显示的内容，其布局也随屏幕尺寸变化而变化。自适应布局的页面，不论屏幕尺寸如何变化，其内容和布局都是一样的。

本文列举一些面向响应式 Web 设计的技巧。

Images

  1. 设 width 属性值为 100%

    这样图片可以随父元素一起放大或缩小。缺点：图片可能被放大到超过原始尺寸，变得非常不清晰。在许多情况下是使用 max-width 。

  2. 设 max-width 属性值为 100%

    这样如果父元素的容器宽度小于图片原始宽度，图片会相应地缩小显示。若父元素容器宽度（远）大于图片宽度，图片至多按原始尺寸显示，而不会无限放大。

  3. 背景图通过设定 background-size 属性，也可以对容器放大和调整尺寸作出响应，参看 CSS Background 章节。

  4. 针对不同设备，使用不同尺寸的图片。

    通过使用媒体查询 min-device-width 检查设备宽度，在对应情况下加载合适的图片。当然也可以使用 min-width，但是这样在调整浏览器窗口尺寸的时候，也会导致重新加载图片。

Videos

设 width 属性值为 100%，效果同 RWD images。设 max-width 属性值为 100%，效果同 RWD images

媒体查询

把适用于手机屏幕的 css 代码作为一般情况，而用于大屏幕的 css 代码放在 media queries 媒体查询里，这就是 mobile first 的思路。

Viewport

viewport 是终端屏幕上用来显示网页的区域。可能比浏览器可是区域大，也可以比浏览器可是区域小。经常看到下面这段代码，为什么要这样做？

<meta name="viewport" content="width=device-width, initial-scale=1.0">

其中 width=device-width 根据设备屏幕宽度来设置页面宽度。

只设定这个的话，在 iPhone 上，当旋转至横屏模式，手机会显示一个 weird 的放大结果。

initial-scale=1.0 设置浏览器第一次加载页面的初始放大等级。添加上面这个设置，横屏、竖屏就会有一样的放大效果。就目前来说：Without initial scale you get the zooming bug in rotation(and sometimes compounded effects on double rotation) and media queries for the landscape mode being ignored. 如果不设置此属性，当手机屏幕尺寸远远小于元素尺寸时，系统会自动缩小元素（等比例缩放）。

通过添加 user-scalable=no 禁止用户缩放。

Grid system 栅格系统

原文地址：How to build a responsive grid system

主要从以下三方面考虑：

  • 设计栅格：等宽？多少列？栅格列以及间距的尺寸？
  • 在不同宽度的视区栅格如何表现：栅格列 resize？间距固定？在特定的断点改变栅格数量？
  • HTML（如 Bootstrap，栅格样式写在 HTML 中，这就要求必须使用一定的结构），还是 CSS式（栅格定义在 CSS 里，一定程度上减少 markup）的栅格系统。

具体步骤

  1. 选择一种技术实现你的栅格：CSS Grid，Flexbox，或者最简单的 floats

  2. 设置所有元素的盒模型为边框盒：

    *, *:before, *:after { box-sizing: inherit; }

  3. 创建栅格最外层容器，设定最大宽度，左右外边距 auto

  4. 计算栅格列的宽度，这里讨论有间距的栅格系统（无间距的宽度平均分就好了）。四种实现方法：

    • 右边 margin，需要清除最右边的栅格的右边 margin，且设置它为右浮动，避免浏览器 round 半px导致它掉下来。
    • 左右均分 margin，没什么难的，calc((100% - 20px * 3) / 3)
    • 右边 padding（不推荐）
    • 左右均分 padding，与第二种类似，但是不需要使用 calc() 计算，因为 padding 包含在 width 中。

    巧用 CSS 的计算方法，比如 calc((100% - 20px * 2) / 3); 得到除去两个20px宽度，平均分成3个栅格列的列宽。

  5. 页面最下面可以写一行用来 debug 的栅格列
  6. 创建布局变量，使用可读性强的 CSS class，借助 Sass 计算栅格列宽，比如 percentage(2/12)
  7. 针对手机、平板、PC 设置断点，在每一个断点处，重新计算 CSS 栅格 class 的宽度