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

【问题标题】：What's the point on using % units in responsive design?在响应式设计中使用 % 单位有什么意义？
【发布时间】：2012-07-24 10:37:21
【问题描述】：

我正在重新设计我的网站，因为在不同的分辨率（除了设备）上看起来很糟糕，大多数指南和教程都依赖于 % 和 em 而不是固定值。我还在学习这个，所以我正在阅读周围的所有内容。

认为这可以解决不同显示尺寸的问题，但又一次：我们必须制作更多 CSS 来解决一些特定问题。

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

感谢您的建议！

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

% 允许您的网站响应用户的查看方式。假设您有一个div，它位于100%。它会填满整个部分，无论它是在手机上还是桌面上。

也可以为尺寸添加额外的 CSS。据我所知，您可以让一些元素显示在 % 中，而一些元素则具有固定的 px 值，尽管它们可能会根据页面的设置方式或正在查看的内容而发生冲突和。

【讨论】：

【解决方案3】：

例如。

您的网站标题宽度为 950 像素；但在移动设备中，它可能适合 450 像素；

因此，您使用媒体查询重新定位一些元素并处理一些大小问题并将标题宽度设置为 450 像素；

但是，如果您使用 % 值，您可以将标题 div 设置为在其父级中具有 100% 的宽度基数。所以你只能改变 body 或一些容器 div 的宽度，所有的孩子都会适应。

【讨论】：

【解决方案4】：

戴安娜，

我很高兴遇到这个问题。我刚刚上传了我的第一个响应式设计，当涉及到字体大小和宽度时，它是基于百分比的 90%。

显然，它看起来并不令人惊奇，而且图像看起来也很不合适......但是请帮我一个忙，调整您的浏览器窗口的大小，慢慢地让它变得越来越小。我通过设置百分比宽度来做到这一点！

相信我，我尝试使用像素进行响应式设计测试，但结果并不理想。百分比宽度确保无论分辨率和/或像素尺寸（本身）如何，设计都将始终迎合屏幕尺寸。此外，我不必使用一个 CSS3 媒体查询，但我强烈建议您仅在需要时使用 CSS3 媒体查询。

在我看来，我应该有一个更大屏幕的媒体查询。

我希望这对你有帮助，就像它对我有帮助一样！谢谢，亚伦

【讨论】：