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

Question

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

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

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

感谢您的任何建议！

Answer 1

使用em尺寸的目的是为了让您的设计脱离用户选择的字体大小。我可能会使用更大的字体，因为我有一个巨大的显示器和视力不佳，而其他人可能更喜欢更小的字体。通过使用em单位，您的设计将兼容我们的字体首选项并相应地调整大小，而不是强制字体大小达到给定的标准（例如“12点字体”）。

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

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

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

Answer 2

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

应该可以为尺寸添加额外的CSS。据我所知，您可以在%中显示一些元素，其中一些元素的固定值为px，尽管他们可能会与冲突，具体取决于页面的设置方式或正在查看的内容。

Answer 3

例如。

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

因此，您使用media-query重新定位某些元素并处理一些尺寸问题，并将标头宽度设置为450px;

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

Answer 4

戴安娜，

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

退房以下： http://www.noxinnovations.com/portfolio/responsive/

显然，这看起来并不惊人，并且图像看起来出路的地方......但是，帮我一个忙，并调整您的浏览器窗口，慢慢使它越来越小。我是通过设置一个百分比宽度来实现的！

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

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

我希望这可以帮助您尽可能多地帮助我！ 谢谢， 亚伦