html – 如何根据窗口宽度加载不同的css文件：较小的大小无法识

发布时间：2020-12-14 23:52:01 所属栏目：资源来源：网络整理

导读：如果窗口大小低于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' / 但是mai

如果窗口大小低于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中的规范覆盖.

解决方法

CSS代表CASCADING STYLE SHEETS,这意味着您应该始终将主样式表放在顶部,然后将次样式表放在它下面.您希望在文件中使用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’s Web Developer Toolbar上的调整大小工具.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!