关于流体网页设计的问题

Question

我们可以通过两种方式实现流体设计（一种可以根据屏幕尺寸进行调整的设计）;

方法1： 我们可以使用可用的浏览器大小（或视口宽度/高度），并相应地定义我们的CSS .... 这相当于使用CSS @media max-width：320px 在这种方法中，即使是挤压到非常小的桌面浏览器也会显示与移动设备相同的设计

方法2： 我们根据观看设备（桌面/移动设备/平板电脑）设计我们的CSS。 这相当于使用CSS @media min-device-width：768px

因此，如果您看到，我们根据“宽度”或“设备宽度”识别要应用的CSS的方式有所不同

我的问题不是媒体查询，而是如何应用它们。

我的问题是，两种设计方法中哪一种应该是首选的，任何一种PROS / CONS？ 我们应该为设备设计还是应该为可用的浏览器区域进行设计？

Answer 1

我总是会为可用的浏览器区域进行设计。移动设备市场以及硬件制造（更高的屏幕分辨率和屏幕比率）不断发展，相信我设计设备会在短时间内使您的网站陷入混乱。

让我知道你的最终决定是什么，因为我对这个主题非常感兴趣。

Answer 2

我更喜欢“可用浏览器区域设计”的方法，因为你不应该强迫用户最大化他的浏览器窗口来完全查看你的网站，即使有较小的浏览器区域的CSS（但你没有使用它，因为用户THEORETICALLY有更多的屏幕空间）。 这不仅会影响使用宽屏显示器的桌面用户，还会影响平板电脑用户。例如。 Windows 8将带来一个方便的功能，可以将浏览器扩展到屏幕宽度的2/3，这可能太小，无法让您的网站正常显示。

Answer 3

我倾向于移动第一种方法，或者更倾向于最小的非设备特定方法。首先是小型样式表和为移动设备构建的网站，然后通过媒体查询添加更高分辨率的内容。