我想使用条件语句来附加不同的样式表:
if the clients resolution is <= 1024*768
我很确定这是可能的,但以前从未见过它的代码?
ps。我不是在寻找 javascript 解决方案
通常人们不会为屏幕分辨率“附加另一个样式表”,因为您可以在页面加载后调整浏览器大小,更改分辨率,并且您不希望每次都加载文件。
这就能解决问题,可以在一个 CSS 文件中或您通常放置 CSS 的任何地方......
例如:
/* css as usual */
.this-class { font-size: 12px; }
/* condition for screen size minimum of 500px */
@media (min-width:500px) {
/* your conditional / responsive CSS inside this condition */
.this-class { font-size: 20px; }
}
当@media查询条件为真时,这应该将字体大小更改为20px,在这种情况下,当屏幕超过500px时。
当您上下调整浏览器大小时,您将看到条件 CSS 规则自动生效,无需 JS。
CSS 3 引入了媒体查询,但它是新的,支持还不是那么广泛(例如,Firefox 仅在版本 3.5 中引入它,而 Internet Explorer 直到版本 9 才会获得它),因此使用渐进增强进行构建心里。 CSS Tricks 有一个教程,为不同的浏览器窗口大小提供不同的 CSS(这是比显示分辨率更有用的指标)。 您可以测试
对您的浏览器的支持,添加脚本标签:
<script type="text/javascript">
if (screen.height < 900) {
document.write('<link href="UrLowRes.css" type="text/css" rel="stylesheet"/>');
} else {
document.write('<link href="UrlHighRes.css" type="text/css" rel="stylesheet"/>');
}
</script>
您甚至可以为智能手机和平板电脑添加其他
if
语句。