我是在线还是最后编写特定于浏览器大小的 css 更改？答案

【问题标题】：Do i write browser size specific css changes in-line or at the end?我是在线还是最后编写特定于浏览器大小的 css 更改？
【发布时间】：2018-01-11 00:23:32
【问题描述】：

所以我正在编写一些用于动态调整浏览器大小的代码，我很好奇将代码放置在哪里的最佳实践 - 我是按照我所在的区域编写它，还是在最后编写它并且回头看看？

他们都工作，但我不想承诺一个路线以后发现它是一团糟:)

示例 - 将其与相关区域对齐

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;
        }
    }
}

【问题讨论】：

对于更少的代码行，请使用第二个选项，因为您不能在每个 CSS 类上添加媒体查询，那将是一个浪费字节 :)

标签： css dynamic browser sass

【解决方案1】：

W3C 网站示例似乎倾向于将媒体查询放在文档末尾，我相信他们这样做可能是出于兼容性原因，因为媒体查询仅支持 CSS3。此外，这允许更快地解析移动设备的 CSS 结构。强制 CSS 解析器将查询部分拼凑在一起会减慢您的初始加载时间。

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

【讨论】：