html - 屏幕分辨率的条件语句？

Question

我想使用条件语句为以下内容附加不同的样式表：

if the clients resolution is <= 1024*768

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

附言。我不是在寻找 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 查询条件为真时，这应该将字体大小更改为 20 像素，在这种情况下，当屏幕超过 500 像素时。

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

Answer 2

CSS 3 引入了媒体查询，但它是新的，并且支持还不是很广泛（例如，Firefox 仅在 3.5 版中引入了它，而 Internet Explorer 直到 9 版才获得它）所以在构建时要考虑到渐进增强。CSS Tricks 有一个教程为不同的浏览器窗口大小提供不同的 CSS（这是一个比显示分辨率更有用的指标）。

您可以测试对您的浏览器的支持。

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为智能手机和平板电脑添加其他语句。