2

使用外部 css 网格是有益的，但加载时间很长，尤其是断点媒体查询。加载多个样式表的利弊是什么，1个主要的样式表带有通用网格布局css，然后是其他样式表以适应该css网格布局的媒体查询断点？
如果这是一个好主意，那么这可能是优化 css 加载的下一个新标准。

 
多媒体查询样式表示
 
例：

这是一个普通的示例网格布局样式表
优点：工作出色且可靠，所有css都在一个位置
缺点：文件非常大，被大量媒体查询块弄乱了

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

.col-md-6 {
    width: 50%;
}

@media all and (max-width: 768px) {
    .col-md-6 {
        width: 100%;
    }
}

这是基于媒体查询的多个样式表的示例
优点：将代码分段，整理，可以减少每个 Google 文档的加载时间 缺点： 不确定它们到底是什么，也许是浏览器支持，但这就是我需要帮助弄清楚的

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

.col-md-6 {
    width: 100%;
}

 

<link href="style-768.css" rel="stylesheet" media="all and (max-width: 768px)">

.col-md-6 {
    width: 100%;
}

 
 
根据我在Googles Developer docs上的信息，仅在需要时加载的样式表（即最大宽度：768px）仅在使用时才被视为“渲染阻止”。当不使用它时，可能会跳过整个样式表，并显着减少当时所需的 css 的初始负载。

这是一个好习惯吗？似乎通过重新定位媒体查询块来减少 2/3 的 CSS 网格系统有很大的好处，但也许这被需要获取多个 CSS 文档的 DOM 抵消了？

4

0 回答 0