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

Question

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

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

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

感谢您的任何建议！

Answer 1

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

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

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

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

Answer 2

戴安娜，

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

查看以下内容： http ://www.noxinnovations.com/portfolio/responsive/

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

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

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

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

Answer 3

例如。

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

因此，您使用 media-query 重新定位一些元素并处理一些大小问题并将标题宽度设置为 450px；

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

Answer 4

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

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