在响应式设计中使用%单位有什么意义？

Question

我重新设计我的网站,因为看起来在不同的分辨率(除了设备),大多数指南和教程依靠可怕的%和em超过固定值.我还在学习这个,所以我正在读周围的一切.

认为这将解决具有不同显示尺寸的问题,但又一次:我们必须制作更多的CSS来修复某些特定问题.

如果我需要为额外的显示尺寸添加媒体查询,为什么要使用%呢？使用%真的减少编码吗？是否需要为某些尺寸添加一些额外的CSS或我做错了什么？

谢谢你的建议!

Answer 1

使用大小的目的em是让您的设计基于用户选择的字体大小。我可能会使用较大的字体，因为我的显示器很大且视力不佳，而其他人可能更喜欢较小的字体。通过使用em单位，您的设计将适应我们的字体首选项并相应地调整大小，而不是强制字体大小达到给定标准（例如“12 点字体”）。

以类似的方式，百分比 (%) 单位允许您的设计响应不同的浏览器尺寸。与单元结合使用em，这将允许基于文本的元素响应任意字体大小选择，并允许布局元素响应任意浏览器大小。

为所有媒体类型设计单一响应式设计是完全可以接受的。媒体查询适用于您希望在不同设备上使用不同的显示样式，而不是“支持”不同的显示尺寸。一个例子是在印刷媒体上使用衬线字体，在显示媒体上使用无衬线字体，因为可用性研究表明这些字体是此类媒体的首选。

此外，它允许您为某些情况（例如移动设备）进行自定义样式，在这些情况下您可能需要考虑用户的带宽有限，并且可能会减少额外的图像。或者，如果您想在某些手机提供的微型屏幕上以完全不同的布局显示内容。