检测屏幕分辨率以加载替代CSS一个好主意？ [英] Detecting Screen Resolution to load alternative CSS a good idea?

问题描述

我与一个平面设计师工作，他一直希望网站大于我推荐的960像素。我可以做一定量的液体布局，但id真的很喜欢能够加载不同的CSS更大的分辨率。我googled它，并找到以下链接，但我担心，我havnt听到更多关于这一点。这是一个可靠的方法吗？我关心，因为我会认为更多的人会想这样做。

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

解决方案

要简单回答你的问题：No.
即使是，它似乎没有效率建立多个CSS文件等。有更好的方法，而不是依赖于解决方法。

更长时间的答案：
当960变成哦，那么是2010 ...有多少网站会显示日期？同时，并非所有浏览互联网的人都有30英寸的电影显示器或双显示器设置，我尝试设计为最适合 MY 流量。

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

建立一个960网格和一个CSS，然后建立一个1024网格和CSS =低效，而不是非常未来证明。

如果您正在观看您的网站流量，并且发现有90％的访问者使用1或2（或3）个分辨率，请制作一个适合该受众群体的流畅布局。 / p>

流体布局可能是市场上不断扩展的设备，分辨率，视口大小，屏幕定义（低，中，高）阵列的最佳通用解决方案 -

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

   
   
   

   @media屏幕和（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; }
   }




2. 添加 min-和max-width 类似的逻辑）也可以帮助满足更广泛的分辨率/浏览器大小，以及给您的设计更长的保质期。

获得最大的爆炸你的钱。流体设计，@media查询，javascript来帮助弥合一些差距。你最终会得到更少的代码，更未来证明的设计，更大比例的满意的访问者。

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.

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

解决方案

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.

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 MY traffic.

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".

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.

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.

1. 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; } }

2. Add min- and max- widths to 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 rely on a document.window.width() function.

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.

这篇关于检测屏幕分辨率以加载替代CSS一个好主意？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！