理智告诉我们,不应该去写那些不常用的样式,这一点对于网站或者APP的性能优化来说十分重要。但是在实际中,我们常常会看到穿插在不同的样式表或者媒体查询中重复多次的CSS声明。所以,我们在开发时应该使用递进式的布局样式,从最小的兼容布局开始。

我们要确保书写的样式在不同的响应式界面下保持相同的风格和基调。毫无疑问,我们会改变字号或者行高,但是像字体无论是在最大的屏幕还是在最小的屏幕上,都应该是几乎一致的。按钮的内边距和表单的元素样式,也许会在响应式设计时发生一些变化,但是它们的基本样式将保持完全相同。

1003.tif

在响应式设计中,内容处理方法之一,也是小屏幕样式处理的基础法则,即在布局样式书写之前,先把颜色、字体、元素素材等样式书写出来。

在向页面中添加第一个媒体查询之前,应该首先从我们的设计风格中提炼和组织样式。每个人组织样式表的方式都不同,我个人会将以下六类元素归类。

这样组织样式表,可以让样式声明更加简单,同时也让元素在触发响应式断点时,能够更加符合设计要求。与此同时,我们可能会在稍后针对响应式的断点,做无数的调整和改变。这种小屏优先的策略,意味着我们只创建必需的核心样式,以及更加简单和可维护的样式表。