1

有两种方法可以实现流畅的设计（一种可以根据屏幕大小自行调整）；

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

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

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

我的问题不是关于媒体查询以及如何应用它们。

我的问题是这两种设计方法中哪一种应该是首选，它们中的任何一种都有什么优点/缺点？我们应该为设备设计还是应该为可用的浏览器区域设计？

4

3 回答 3

1

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

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

于 2011-09-15T07:57:57.240 回答
1

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

于 2011-09-15T07:59:31.553 回答
0

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

于 2011-11-30T11:02:51.070 回答