html - css 媒体查询更改

Question

我有几个关于 CSS 媒体查询的问题。

我。两个 css 文件(例如 normal.css 和 lessthan1024.css)是否都必须包含所有 css 规则？或者 lessthan1024.css 可以只包含不同的规则吗？

二。它适用于浏览器调整大小吗？还是必须刷新页面？

谢谢

Answer 1

I. 假设无论分辨率如何，您都希望有一个蓝色背景的页眉。如果您在 lessthan1024.css 文件中仅包含不同之处，这意味着您不会为小于 1024 像素的页眉设置蓝色背景。那么在这种情况下，您认为您的问题的答案是什么？

II. 它用于调整浏览器窗口的大小。没有刷新。

---

话虽这么说，但我相信这样做可能会更好:

我。使用移动设备优先的方法 - 这意味着您从最小的显示尺寸开始作为标准，然后开始调整页面的外观以适应更大的显示

二。使用 @media 规则将所有显示尺寸的所有 CSS 放在一个文件中；示例:

/* base styling: common rules + smallest display rules*/

@media only screen and (min-width: 35em) {
    /* adjust style for larger display */
}

我认为这样更好的原因是……好吧，如果您使用 2 个 .css 文件，那么您将重复一些规则。假设您想更改其中的一些。您必须在 2 个地方进行相同的更改。也许您忘记在一个文件中进行更改。或者您可能不记得您在一个文件中将填充设置为 1em，而在另一个文件中将其设置为 2em。