我是将浏览器大小的特定css更改写成一行，还是写到最后？

Question

因此，我正在为动态浏览器调整大小编写一些代码，我想知道在哪里最好的做法是把我的代码放在哪里--我是按照我所在的区域来写它，还是在后面写它并引用它呢？

这两种方法都很管用，但我不想再坚持一条路，后来才发现这条路乱七八糟的:)

示例--将其与相关领域保持一致

​

ul {
    li {
        font - size: 14 px;
        @media screen and(max - width: 1280 px) {
            font - size: 11 px;
        }
    }
}

​

或者再提到它

​

ul {
    li {
        font - size: 14 px;
    }
}

@media screen and(max - width: 1280 px) {
    ul {
        li {
            font - size: 11 px;
        }
    }
}

​

Answer 1

W3C网站的例子似乎倾向于将媒体查询放在文档的末尾，我认为这可能是出于兼容性的原因，因为媒体查询仅限于CSS3。此外，这还允许更快地解析用于移动的CSS结构。强迫CSS解析器将查询的各个部分拼凑在一起，将减慢初始加载时间。

如果您忽略了兼容性问题，我仍然倾向于将所有媒体查询放在末尾，就好像它们是不同的样式表一样。它们就像单独的样式表，因为它们假设基本行为，然后修改它。由于普通CSS还不能很好地支持变量，所以将它们放在末尾也可以避免重复设备坐标值。从组织的角度来看，设备区域也可能也代表最高级别的组织结构。把它们放在最后似乎是标准的。