EN
AR
RU
ZH
FR
ES
2025年3月8日 • 作者 KWD
五项设计原则帮助开发者提高效率：使用相对CSS单位、基于内容而非设备宽度设置断点、优先考虑功能而非视觉、遵循线框图-设计-代码顺序、使用适当工具测试响应式设计。
关键要点
- 在CSS中使用rem和百分比而非像素，以实现跨设备的流动式、可扩展样式。
- 根据内容需求而非设备宽度设置媒体查询断点，以获得更好的性能。
- 在关注开发的视觉设计方面之前，先列出所需功能。
- 遵循严格顺序：线框图草图，然后使用色彩和排版进行设计，然后编码。
- 使用LT Browser等专门工具测试网站响应式设计，以确保移动兼容性。
设计是智能的可视化呈现。- Alina Wheeler，作者。
设计师的主要职责是设计应用/网站的前端视觉组件。他们的工作影响应用/网站的可用性和用户体验。
首先解决问题。然后，编写代码。- John Johnson
另一方面，开发者专注于编码思想和概念，以开发应用/网站的功能。
设计师和开发者是不同的人。在小公司中，他们的职责有重叠，在大公司中有时也会如此。开发者可以遵循几项原则来将产品推向生产。
CSS中的相对单位
利用em、rem和百分比有助于CSS样式在不同屏幕尺寸上的流畅性。
使用rem而不是像素作为单位。例如 section.hero {width: 90%; font-size: 1.5rem;} 而不是 section.hero {width: 900px; font-size: 16px;}
例如，如果你需要改变一个断点，你的宽度保持一致。你可以通过改变元素的字体大小来简单地改变任何元素的字体大小。
媒体查询和内容
内容决定了任何设备的断点，而不是设备宽度。
如果你考虑设备宽度，设备的发展速度呈指数级增长，作为开发者我们永远无法跟上。
我们需要为这个问题找到一个智能的解决方案，内容为我们提供了解决这个问题的机会。
@zomigi 第一个媒体查询实际上是对媒体查询不支持的缺失。— Bryan Rieger (@bryanrieger) 2011年12月1日
如果你感到有点迷茫，在决定行长时使用黄金比例字体计算器。
拥有内容断点的另一个重要方面是性能改进，因为一切看起来都运作良好，无需太多调试。
简洁是机智的灵魂。- Polonius
保持简短，保持简单。
首先列出功能
作为开发者，我们首先列出需要开发的功能。
大多数时候，当我们的工作与设计师重叠时，我们会迷失在视觉方面，而不是专注于手头的工作，即首先列出功能，然后处理其他方面。
你问自己的问题是你将产生什么类型输出的指标。
假设你问自己一个问题，"这应该向左还是向右浮动？"而不是"我可以通过哪些方式让用户感到舒适地使用应用？"
首先列出功能，然后设计。
线框图、设计、编码：按这个顺序
无论你做什么，首先在纸上或粗略线框图上做一个大致的草图。
然后进行带有配色方案、排版和视觉元素的设计。
最后一步是编码。
如果你遵循这个顺序，生产时间将会改进。
LT Browser - 响应式测试
你知道有一个浏览器可以测试应用或网站的响应式设计吗？它叫LT Browser（Lambda Test Browser）。
这是用于构建、测试和调试移动网站的下一代浏览器。
https://www.youtube.com/watch?v=RH95O9mOGoc
总结：
简而言之，作为开发者，这五项设计原则可以帮助你的网站或应用高效地运行，少去烦恼。
