响应式设计像素与百分比

Question

我希望有人可以提供帮助。

我最近在一个知名网站上观看了关于响应式网页设计的视频。

我对导师采取的方法感到困惑。他基本上创建了三种样式表（大/中/小），在每个样式表中，他给出了DIVS的PX宽度，并在必要时交换图像。

当然，这种方法存在缺陷，他只能使用百分比进行流体布局，而不是通过媒体查询调用不同的样式表？

他的方法有什么好处吗？

非常感谢，

Answer 1

灵活设计和响应式设计之间存在区别。

根据我阅读的一些书籍，您可以使用％length来灵活地进行布局 值，因此布局适应视口宽度的精确尺寸。

如果使用媒体查询构建响应式设计，则可以进行使用的设计 绝对长度（像素）并根据不同来调整那些硬编码值 媒体查询中定义的屏幕大小限制。

因此，灵活的设计可以很好地作为响应式设计，并且响应式设计可能 基于固定宽度的布局。

毋庸置疑，您使用的方法取决于您尝试的设计 构建以及它必须如何在各种设备中工作。

您的教程的作者不一定是错的，但他们的方法可能不是 构建响应式设计的最有效方法。在某些情况下，如果您使用 ％值，您可以使用更简洁的CSS样式表来实现您的设计。

Answer 2

您可以同时使用流畅布局和响应式查询 - 响应式媒体查询占用流动性不再管理的位置。

例如，四列中的内容（列宽为百分比）会缩小列大小以缩小屏幕宽度。但是有一个点，列很窄，每行只有一两个单词，看起来很简单，很难阅读，导致内容溢出容器。当它降到移动尺寸时，一切都太小而根本无法读取。

要解决此问题，您可以编写媒体查询以将其中一个或多个列重新定位到其他位置 - 查询允许您完全重写页面，而不是简单地缩小页面。并且，与使用浮动（通常用于图像）不同，只有最终的一个随着事物变小而下降，使用媒体查询，您可以决定哪个是最合理的div或列移动，以及将其重新定位到哪里（甚至是完全隐藏它。

最好不要在任何地方使用PX设备，特别是要让我们的页面上的文字内容可以由有视力不佳的人访问。请注意，如果用户使用更高的文本缩放运行（我经常需要这样做），那么文本只是每行一个或两个单词的点会更早，更宽的列宽。我最近在http://www.enigmaticweb.com/index.php/blog/accessibleResponsiveness的博客上写了这篇文章，你可能觉得它很有用。答案是对于容纳文本的容器使用EM单元，对于媒体查询断点（如果你刚刚开始使用媒体查询，那么在开始时就很好地养成这种习惯）。特别要避免使用固定高度和宽度的Div - 只要用户缩放文本大小，一切都会从div中突然出现并破坏其他东西！

顺便说一句，你提到的导师通常并不好，并且将你的媒体查询放在多个样式表中（他可能只是试图说明查询的单独性质） - 这会增加加载时间（单独的HTTP访问） ）这对手机来说尤其是坏消息。

我希望这会有所帮助。现在，大量的商业网站都在响应，以满足手机的需求。这是世界的发展方向。

Answer 3

在我早期学习如何使用图形和设计背景进行编码的过程中。我发现使用超过百分比的像素比较尴尬。如果您要设计的产品是针对特定屏幕尺寸的，那么事情就这么简单，然后才可以适应使用像素（在任何情况下，％仍然可以使您的工作更轻松）。在编码时，我们应该牢记一件事，即“美学”。您希望内容流畅，自适应，请坚持％并节省时间。