如何根据窗口宽度加载不同的css文件：无法识别更小的尺寸

zsbz8rwp 于 2023-01-14 发布在其他

关注(0)|答案(3)|浏览(93)

我想加载一个不同的css文件，如果窗口大小低于500px。我有

<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

来源：https://stackoverflow.com/questions/23071521/how-to-load-different-css-file-depending-on-window-width-smaller-size-not-recog

3条答案

按热度按时间

oalqel3c1#

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属性按字母顺序排列，如果您前进得足够远，您会发现这样的小花絮将为您节省许多麻烦，并坚持对元素属性使用双引号。
这当然回答了这个问题，虽然你真正应该做的是尽量减少你的HTTP请求 * 如果 * 你要有一个CSS文件的HTTP请求，无论在CSS本身是你应该使用媒体查询。

main {margin: 4%;}
section {border-width: 10px;}
@media (max-width: 1024px)
{
 main {margin: 4px;}
 section {border-width: 2px;}
}

始终在最高分辨率上测试代码 * 优先 *;我忽略"移动优先"的心态是有充分理由的：我"理解" CSS "应该"是怎么写的。你的媒体查询"应该"朝下，以适应同一网站的平板电脑和（手机）视图。考虑以下代码：

- 中央支助组**

div {border: #000 solid 2px; float: left; width: 96px;}

- 超文本标记语言**

<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上的 * Resize * 工具。

赞(0）回复(0）举报 2023-01-14

wa7juj8i2#

我们可以使用响应式媒体查询来定位任何设备。现在，如果我们想单独维护每个设备的CSS，那么保持我们的代码干净和可维护是一个好主意。

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 767px)"
  href="abc.css" />

赞(0）回复(0）举报 2023-01-14

os8fio9y3#

我把media="（min-width：500 px）”放到我的主css文件（style.css）中，然后问题就解决了

<link rel="stylesheet" media="(min-width:500px)" href="/style.css" />
<link rel="stylesheet" media="(max-width:500px)" href="/mobile.css" />

赞(0）回复(0）举报 2023-01-14

我来回答

如何根据窗口宽度加载不同的css文件：无法识别更小的尺寸

3条答案

相关问题

热门标签

最新问答