5

我与一位图形设计师合作，他不断希望使网站大于我推荐的 960 像素。我可以在一定程度上使用流式布局，但我真的很喜欢能够为更大的分辨率加载不同的 CSS。我用谷歌搜索并找到了下面的链接，但我担心我没有听到更多关于这个的信息。这是一个可靠的方法吗？我很担心，因为我原以为会有更多的人想要这样做。

http://www.ilovecolors.com.ar/detect-screen-size-css-style/ 谢谢

4

1 回答 1

10

简单地回答你的问题：不。即使是这样，构建多个 CSS 文件等似乎效率低下。有比依赖分辨率更好的方法。

一个冗长的答案：当 960 变成“哦，那是 2010 年……”时，您的网站中有多少会显得过时？同时，并不是每个浏览互联网的人都拥有 30 英寸影院显示器或双显示器设置。我尝试设计以最好地适应我的流量。

虽然检测浏览器窗口宽度和/或屏幕宽度（显示器分辨率）可能很好，但我认为大多数人的意见是：了解您的目标受众并为其设计/构建。

构建一个 960 网格和一个 CSS，然后构建一个 1024 网格和一个 CSS = 效率低下，并且不是很“面向未来”。

如果您正在查看您的网站流量并发现 90% 的访问者使用 1 或 2（或 3）种分辨率，请构建适合该受众的流畅布局。

对于现在市场上不断扩大的设备、分辨率、视口尺寸、屏幕定义（低、中、高）阵列，流体布局可能是最好的通用解决方案——更不用说 18 个月后了。

  1. 签出@media 查询以添加到流畅的布局/设计中。修改一个 CSS 文件（不是 3 个）。http://www.w3.org/TR/css3-mediaqueries/

    @media screen and (max-width:960px) { h1, h2 { color:#990000; 字体大小：1.4em；} }

    @media screen and (max-width:1280px) { h1, h2 { color:#336699; 字体大小：1.8em；} }

  2. 添加min- and max- widths到您的 CSS（或类似的逻辑）也可以帮助满足更广泛的分辨率/浏览器尺寸，并为您的设计提供更长的保质期。并且不依赖于 document.window.width() 函数。

获得最大的收益。流畅的设计、@media 查询、javascript 来帮助弥合一些差距。你最终会得到更少的代码，更“面向未来”的设计，以及更大比例的满意访问者。

于 2011-03-02T18:16:34.227 回答