移动响应式样式表独立工作，但不在父样式表中答案

【问题标题】：Mobile responsive stylesheet works on its own, but not within the parent stylesheet移动响应式样式表独立工作，但不在父样式表中
【发布时间】：2023-03-15 06:40:01
【问题描述】：

正如标题所说，我有两个样式表，一个用于移动设备，另一个用于桌面。我使用@media screen and (max-width: 1007) {} 查询将两者结合起来。

然而，这对我来说似乎无法正常工作，因为某些元素不受样式表的影响 - 桌面样式表会覆盖某些元素，但不是全部，出于某种原因.

合并样式表是不好的做法吗？我是否应该在 HTML 文件中有指向它们的单独链接？

【问题讨论】：

标签： html css mobile

【解决方案1】：

我的建议：

我会在你的<head> 中有两个单独的 CSS 文件，就像这样。

<link rel="stylesheet" href="mystyle.css">
<link rel="stylesheet" href="responsive-styles.css">

否则，您可以通过只有一个 main.css 来组合它们：看起来像这样：

@import url("style.css");
@import url("css/responsive.css");
@import url("css/custom.css");
@import url("css/fonts.css");
@import url("css/jquery-ui.css");

这样做的最终目标是只有一个 .main CSS 文件，其中包含所有主要样式、响应式样式、字体等。

结果将由您的<head>中的仅这个组成

<link href="main.css" rel=stylesheet>

请记住，样式表是并行加载的，页面不会阻止进一步解析等待样式表加载。因此，我的建议。

【讨论】：

是的，这就是我所拥有的？移动和桌面组合在一个样式表中。我的@media 查询位于最底部，因此顶部的样式也优先。