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

尽量减少代码重复

对于响应式来说,每个媒体查询都会增加成本,添加的媒体查询越多,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); }

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

推荐阅读更多精彩内容

  • 尽量减少代码重复 在软件开发中,保持代码的DRY 和可维护性是最大的挑战之一,而这句话对CSS 也是适用的。在实践...
    图灵教育阅读 756评论 0 14
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 624评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 665评论 0 9
  • 笔记参考自《响应式Web设计:HTML5和CSS3实践》,2013年出版内容说不上最新。如下是全书的章的目录:第 ...
    于晓鱼阅读 215评论 0 1
  • 我还记得国外某位大牛在一篇文章中写道,CSS is fine, it's just really hard。读完他...
    garble阅读 299评论 0 0