关于响应式网页设计的一些思考

尽量减少代码重复

对于响应式来说，每个媒体查询都会增加成本，添加的媒体查询越多，CSS代码就会越变得经不起折腾，这并不是说媒体查询就是一种不良实践，只要用对了，它就是利器，但是它只应该作为最后的手段，媒体查询不能以一种连续的方式来修复问题。它的工作原理基于特定的断点，如果大部分代码并不是以弹性方式来写，那么媒体查询能做的只是修补某个特定分辨率下的特定问题——这本质就是酱灰尘扫到地毯下面而已。
下面几种方式可以避免不必要的媒体查询：

• 使用百分比长度来取代固定长度。

eg：vw、vh、vmin、vmax

• 当需要在较大分辨率下得到固定宽度时，使用max-width而不是width。
  不要忘记为替换元素(比如 img object video iframe等)设置一个max-width
  ，值为100%。

• 加入背景图片需要完整地铺满一个容器，不管容器的尺寸如何变化。
  background-size: cover

• 当图片或其他元素以行列式进行布局时，让视口的宽度来决定列的数量。
  Flexbox或者display: inline-block

• 在使用多列文本时，指定column-width
  (列宽)而不是指定column-count(列数)。

合理使用简写

以下两行代码并不是等价的：

background: rebeccapurple;
background-color: rebeccapurple;

前者得到纯色背景，
后者只是单个属性，可能存在其他比如background-image声明。
展开式属性与简写属性配合使用可以让代码更加的DRY。

我应该使用预处理器吗

Stylus，Sass,Less如果使用得当，它们会在大型项目中可以让代码更加灵活
下面变量的玩法预处理器无法做到：

ul { --accent-color: purple; }
ol { --accent-color: rebeccapurple; }
li { background: var(--accent-color); }

在引入预处理器的问题上需冷静决策，避免依赖和滥用。
​