Javascript 检测屏幕分辨率以加载替代 CSS 是个好主意吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5170931/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detecting Screen Resolution to load alternative CSS a good idea?
提问by Evanss
Im working with a graphic designer who constantly wants to make websites larger than the 960 pixels i recommend. I can do a certain amount with liquid layouts but id really love to be able to load different CSS for larger resolutions. I googled it and found the link below, but im worried that I havnt heard more about this. Is this is a reliable method? Im concerned as I would have thought that more people would want to do this.
我和一位平面设计师一起工作，他一直想让网站大于我推荐的 960 像素。我可以用液体布局做一些事情，但我真的很喜欢能够为更大的分辨率加载不同的 CSS。我用谷歌搜索并找到了下面的链接，但我担心我没有听说过更多关于这个的信息。这是一个可靠的方法吗？我很担心，因为我原以为会有更多人想要这样做。
http://www.ilovecolors.com.ar/detect-screen-size-css-style/Thanks
http://www.ilovecolors.com.ar/detect-screen-size-css-style/谢谢
回答by Dawson
To simply answer your question: No. Even if it was, it seems inefficient to build multiple CSS files, etc. There are better methods than relying on resolution.
简单回答你的问题：不。即使是这样，构建多个 CSS 文件等似乎效率很低。有比依赖分辨率更好的方法。
A longer-winded answer: When 960 becomes "oh, that's so 2010..." how many of your sites will look dated? At the same time, not everyone that browses the internet has a 30" Cinema display either, or a dual monitor setup. I try to design to best accommodate MYtraffic.
一个冗长的答案：当 960 变成“哦，那是 2010 年......”您的网站中有多少看起来已经过时了？同时，并不是每个浏览互联网的人都拥有 30" 影院显示器，或双显示器设置。我尝试设计以最好地适应我的流量。
Although it may be nice to detect browser window widths, and/or screen widths (monitor resolution), I think the majority opinion is this: Know your intended audience and design/build for it.
尽管检测浏览器窗口宽度和/或屏幕宽度（显示器分辨率）可能很好，但我认为大多数人的意见是：了解您的目标受众并为其设计/构建。
Building a 960 grid and a CSS, then building a 1024 grid and a CSS = Inefficiency, and not very "future proof".
构建一个 960 网格和一个 CSS，然后构建一个 1024 网格和一个 CSS = 效率低下，并且不是非常“面向未来”。
If you're watching your site traffic and see that 90% of your visitors are using 1 or 2 (or 3) resolutions, build a fluid layout that works well for that audience.
如果您正在查看网站流量并发现 90% 的访问者使用 1 或 2（或 3）个分辨率，请构建适合该受众的流畅布局。
Fluid layouts are probably the best universal solution to the ever-expanding array of devices, resolutions, viewport sizes, screen definitions (low, medium, high) on the market now -- let alone 18 months from now.
流体布局可能是目前市场上不断扩展的设备、分辨率、视口尺寸、屏幕定义（低、中、高）阵列的最佳通用解决方案——更不用说从现在开始的 18 个月了。
Checkout @media queries to add to a fluid layout/design. Modify one CSS file (not 3). http://www.w3.org/TR/css3-mediaqueries/
@media screen and (max-width:960px) { h1, h2 { color:#990000; font-size:1.4em; } }
@media screen and (max-width:1280px) { h1, h2 { color:#336699; font-size:1.8em; } }
Add
min- and max- widthsto your CSS (or a similar logic) can also help satisfy a wider range of resolutions/browser sizes, as well as give your design a longer shelf life. And doesn't relyon a document.window.width() function.
签出@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；} }
添加
min- and max- widths到您的 CSS（或类似逻辑）还可以帮助满足更广泛的分辨率/浏览器尺寸，并为您的设计提供更长的保质期。并且不依赖于 document.window.width() 函数。
Get the most bang for your buck. Fluid designs, @media queries, javascript to help bridge some gaps. You'll end up with less code, a more "future proof" design, and a larger percentage of satisfied visitors.
物超所值。流畅的设计、@media 查询、javascript 来帮助弥合一些差距。您最终会得到更少的代码、更“面向未来”的设计以及更大比例的满意访问者。
