javascript - 检测屏幕分辨率以加载替代 CSS 是个好主意吗？

Question

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

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

Answer 1

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

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

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

构建一个 960 网格和一个 CSS，然后构建一个 1024 网格和一个 CSS = 效率低下，而且不是很“ future 证明”。

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

流体布局可能是目前市场上不断扩展的设备、分辨率、视口(viewport)大小、屏幕清晰度(低、中、高)系列的最佳通用解决方案——更不用说 18 个月后了。

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

   @media 屏幕和(最大宽度:960px){ h1, h2 { 颜色:#990000;字体大小:1.4em； }

   @media 屏幕和(最大宽度:1280px){ h1, h2 { 颜色:#336699;字体大小:1.8em； }

2. 将 min- 和 max- widths 添加到您的 CSS(或类似的逻辑)也有助于满足更广泛的分辨率/浏览器大小，并使您的设计更长保质期。并且不依赖 document.window.width() 函数。

物有所值。流体设计、@media 查询、javascript 来帮助弥合一些差距。您最终会得到更少的代码、更“面向 future ”的设计以及更高比例的满意访问者。