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

Question

我和一位平面设计师一起工作,他经常想要制作比我推荐的960像素更大的网站.我可以用液体布局做一定数量但是我真的很想能够为更大的分辨率加载不同的CSS.我用Google搜索并找到了下面的链接,但我担心我会听到更多有关此事的消息.这是一种可靠的方法吗？我担心,因为我会想到更多人会想要这样做.

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

Answer 1

简单地回答你的问题:不.即使是这样,构建多个CSS文件似乎效率低下等等.有更好的方法而不是依赖于解决方案.

一个啰嗦的答案:当960变成"哦,那就是2010年......"你的网站会有多少看起来过时？与此同时,并非所有浏览互联网的人都拥有30英寸的Cinema显示器,或双显示器设置.我尝试设计以最好地适应我的流量.

虽然检测浏览器窗口宽度和/或屏幕宽度(显示器分辨率)可能会很好,但我认为大多数意见是:了解您的目标受众和设计/构建它.

构建一个960网格和一个CSS,然后构建一个1024网格和一个CSS =低效率,而不是非常"未来证明".

如果您正在观看网站流量并看到90%的访问者使用1或2(或3)种分辨率,请构建适合该受众群体的流畅布局.

流体布局可能是目前市场上不断扩展的设备,分辨率,视口大小,屏幕定义(低,中,高)阵列的最佳通用解决方案 - 更不用说18个月了.

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

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

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

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

获得最大收益.流体设计,@ media查询,javascript帮助弥补一些差距.您最终会得到更少的代码,更"未来证明"的设计,以及更大比例的满意访问者.