Html 屏幕分辨率的条件语句？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3194610/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
conditional statement for screen resolution?
提问by Haroldo
I would like to use a conditional statement to attach a different stylesheet for:
我想使用条件语句附加不同的样式表：
if the clients resolution is <= 1024*768
if the clients resolution is <= 1024*768
I'm pretty sure this is possible, but have never seen the code for it before?
我很确定这是可能的，但以前从未见过它的代码？
ps. I am not looking for a javascript solution
附：我不是在寻找 javascript 解决方案
回答by OG Sean
Typically people don't "attach another stylesheet" for screen resolution because you could resize the browser after page load, changing the resolution, and you don't want file loading every time you do.
通常人们不会为屏幕分辨率“附加另一个样式表”，因为您可以在页面加载后调整浏览器的大小、更改分辨率，并且您不希望每次都加载文件。
This will do the trick, in one CSS file:
这将在一个 CSS 文件中解决问题：
Ex:
前任：
/* 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; }
}
This should change the font size to 20px when the @media query condition is true, in this case when the screen is over 500px.
当@media 查询条件为真时，这应该将字体大小更改为 20px，在这种情况下，当屏幕超过 500px 时。
As you size your browser up and down you will see the conditional CSS rules take effect automatically, no JS needed.
当您上下调整浏览器的大小时，您会看到条件 CSS 规则自动生效，不需要 JS。
回答by Quentin
CSS 3 introduces media queries, but it is new and support is not all that widespread yet (Firefox only introduced it in version 3.5, for instance, and Internet Explorer won't get it until version 9) so build with progressive enhancement in mind. CSS Tricks has a tutorial for providing different CSS for different browser window sizes(which is a more useful metric then display resolution).
CSS 3 引入了媒体查询，但它是新的并且支持还不是那么普遍（例如，Firefox 仅在 3.5 版中引入它，而 Internet Explorer 直到版本 9 才会得到它）所以构建时要考虑渐进增强。CSS Tricks 有一个教程，用于为不同的浏览器窗口大小提供不同的 CSS（这是一个比显示分辨率更有用的指标）。
You can test support for your browser.
您可以测试对浏览器的支持。
回答by frenchie
There's this option, totally client side and javascript driven, add a script tag:
有这个选项，完全由客户端和 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>
You could even add other ifstatements for smartphones and tablets.
您甚至可以if为智能手机和平板电脑添加其他语句。
