如何根据窗口宽度加载不同的css文件：较小的大小无法识别 [英] How to load different css file depending on window width: smaller size not recognized
问题描述
如果窗口大小低于500像素，我想加载另一个css文件。我有
I want to load a different css file if the window size is below 500px. I have
<link type="text/css" media='(max-width: 500px)' rel="stylesheet" href="/static/mobile.css" />
<link type="text/css" media='(min-width: 500px)' rel='stylesheet' href='/static/main.css' />
但是main.css总是覆盖mobile.css，尽管窗口小于500px。发生了什么问题？
But the main.css always overrides the mobile.css despite the window being less than 500px. What's wrong?
编辑：
我将其更改为
I changed it to
<link type="text/css" rel="stylesheet" href="/static/main.css" />
<link type="text/css" media="(max-width: 500px)" rel="stylesheet" href="/static/mobile.css" />
但是当我将窗口缩小到小于500px时，元素检查器显示mobile.css
But when I shrink the window to less than 500px, the element inspector shows that the mobile.css is being loaded, but every element is being overridden by specifications from main.css.
推荐答案
CSS代表 CASCADING STYLE SHEETS ，这意味着您应始终将主样式表放在顶部，然后在其下方添加辅助样式表。在文件中更确定要使用CSS，而在其他文件中使用CSS应该比其他CSS文件更远。
CSS stands for CASCADING STYLE SHEETS which means you should always have your main stylesheet at the top and then secondary style sheets below it. The more certain you want to use the CSS in a file over the others the further down/after the other CSS files it should be.
<link href="themes/default/primary.css" rel="stylesheet" type="text/css" />
<link href="themes/default/secondary.css" rel="stylesheet" type="text/css" />
<link href="themes/default/tertiary.css" rel="stylesheet" type="text/css" />
如果辅助规则匹配主节点中的规则，那么因为secondary.css文件级联之后的primary.css然后它优先。与third.css文件和规则相同，它将取代secondary.css文件的规则。
If rules in the secondary match the rules in the primary then because the secondary.css file cascades after the primary.css then it takes precedence. The same with the tertiary.css file and it's rules, it will supersede the rules of the secondary.css file.
现在应用您的问题...
Now apply your problem...
取出所有主要的CSS文件，然后添加屏幕特定的CSS文件...
Take all the main CSS files and then add the screen-specific CSS files...
<head>
<link href="themes/default/primary.css" rel="stylesheet" type="text/css" />
<link href="themes/default/secondary.css" rel="stylesheet" type="text/css" />
<link href="themes/default/tertiary.css" rel="stylesheet" type="text/css" />
<link href="/static/mobile.css" media="(max-width: 500px)" rel="stylesheet" type="text/css" />
<link href="/static/main.css" media="(min-width: 500px)" rel="stylesheet" type="text/css" />
</head>
还要尽量保持HTML属性的字母顺序，如果你向前推进足够你会发现小tidbits像这样会为你节省很多麻烦，并坚持使用双引号引用元素属性。
Also try to keep your HTML attributes alphabetical, if you advance far along enough you'll find small tidbits like that will save you a lot of hassle and stick to double-quotes for element attributes.
这篇关于如何根据窗口宽度加载不同的css文件：较小的大小无法识别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
