Question

我想使用条件语句来附加不同的样式表：

if the clients resolution is <= 1024*768

我很确定这是可能的，但之前从未见过它的代码？

PS。我不是在寻找一个javascript解决方案

Answer 1

通常人们不会“附加另一个样式表”来进行屏幕分辨，因为您可以在页面加载后调整浏览器大小，更改分辨率，并且每次都不需要加载文件。

这将在一个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查询条件为true时，这应该将字体大小更改为20px，在这种情况下，当屏幕超过500px时。

当您上下调整浏览器大小时，您会看到条件CSS规则自动生效，无需JS。

Answer 2

CSS 3引入了media queries，但它是新的，并且支持并不是那么广泛（例如，Firefox仅在3.5版本中引入它，而Internet Explorer在版本9之前不会得到它）所以构建随着进步的增强。 CSS Tricks有一个提供different CSS for different browser window sizes的教程（这是一个更有用的指标，然后显示分辨率）。

您可以测试support for your browser。

Answer 3

有这个选项，完全客户端和javascript驱动，添加脚本标记：

<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语句。

屏幕分辨率的条件声明？

3 个答案: