屏幕分辨率的条件语句？答案

【问题标题】：conditional statement for screen resolution?屏幕分辨率的条件语句？
【发布时间】：2011-03-12 19:08:39
【问题描述】：

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

if the clients resolution is <= 1024*768

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

ps。我不是在寻找 javascript 解决方案

【问题讨论】：

标签： html css conditional screen-resolution

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

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

【讨论】：

你也可以使用@media (max-width:500px)来定位500px以下的屏幕尺寸，等等。您可以将无限制的条件媒体查询 CSS 块添加到同一个/主 CSS 文件中，因此直接响应式设计不需要额外的文件。

【解决方案2】：

CSS 3 引入了media queries，但它是新的，支持还不是很广泛（例如，Firefox 仅在 3.5 版中引入了它，而 Internet Explorer 直到版本 9 才得到它）所以使用渐进式构建增强记在心里。 CSS Tricks 有一个提供 different CSS for different browser window sizes 的教程（这是一个比显示分辨率更有用的指标）。

你可以测试support for your browser。

【讨论】：

是的，遗憾的是 1024*768 和旧浏览器（没有 css3）之间存在很强的相关性！ - 随着上网本的兴起，res-css 相关性可能会改变
因此为窄显示构建，并使用媒体查询来检测更宽的窗口并覆盖布局。
更新：自 2010 年以来发生了很大变化，CSS 媒体查询现在几乎在全球范围内被接受，并且在所有主要浏览器上都受支持

【解决方案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 语句。

【讨论】：

他要求非 JavaScript 解决方案。