如何根据窗口宽度加载不同的css文件:较小的大小无法识别
man*_*ngo 8 html css media-queries responsive-design
如果窗口大小低于500px,我想加载不同的css文件.我有
<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.怎么了？
编辑:我把它改成了
<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,但是每个元素都被main.css中的规范覆盖.
Joh*_*ohn 10
CSS代表CASCADING STYLE SHEETS,这意味着您应该始终将主样式表放在顶部,然后将次样式表放在它下面.您希望在文件中使用CSS而不是其他CSS文件中的CSS应该更加确定.
<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之后级联,则它优先.与tertiary.css文件及其规则相同,它将取代secondary.css文件的规则.
现在应用你的问题......
获取所有主要CSS文件,然后添加特定于屏幕的CSS文件...
<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属性的字母顺序,如果你向前推进足够远,你会发现这样的小花絮会为你节省很多麻烦并坚持使用双引号来表示元素属性.
这当然回答了这个问题,尽管如果你要对CSS文件发出HTTP请求,你真正应该做的是最小化你的HTTP请求.无论在CSS本身内部,您应该使用媒体查询.
main {margin: 4%;}
section {border-width: 10px;}
@media (max-width: 1024px)
{
main {margin: 4px;}
section {border-width: 2px;}
}
始终首先以最高分辨率测试您的代码; 我有理由忽略"移动优先"的心态:我理解 CSS 应该如何编写.您的媒体查询应该在底部,以调整同一网站的平板电脑和(移动)电话视图.请考虑以下代码:
CSS
div {border: #000 solid 2px; float: left; width: 96px;}
HTML
<section>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
</section>
...当您调整浏览器大小时,此示例中的div元素将简单地开始向下推到第二行,并且您将浏览器窗口的大小调整为更小.平板电脑和移动设备只是真正减少了窗口大小.我强烈建议使用Chris Pederick的Web Developer Toolbar上的Resize工具.
