Question

我开始学习更少的CSS。是否有可能导入不同的文件

基于视图端口元标记。我想为不同的分辨率编写自己的文件。

我也想知道“视口元标记如何工作？”

我想从元标记中了解

如何将设备宽度设置为元标记和相应媒体的“宽度”属性

查询已执行。

Answer 1

AFAIK你不能用viewport metatag做到这一点。您可以使用媒体查询：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

编译Less客户端网站时（请参阅：http://lesscss.org/#usage），您可以这样做：

<html>
<head>
    <link rel="stylesheet" media="(max-width: 767px)" href="green.less" />
    <link rel="stylesheet" media="(min-width: 768px)" href="red.less" />
    <script src="less.js" type="text/javascript"></script>
</head> 
<body>
<p>color this text</p>
</body>
</html>

使用： green.less：p{color:green;}和 red.less：p{color:red;}和

另请阅读http://andydavies.me/blog/2012/12/29/think-twice-before-using-matchmedia-to-conditionally-load-stylesheets/

在大多数情况下，您不使用客户端编译进行生产。甚至预处理器也只能在开发过程中使用。在生产环境中，应该使用真正的结果CSS代码。当在服务器上安装LESS时，通过npm，也将安装用于服务器端编译的编译器。

您可以在较少的文件中使用它们，而不是使用媒体查询来加载不同的资源。对于上面的示例，您的代码应该类似于：

p{color:green;}
@media(min-width: 768px)
{
    p{color:red;}
}

Answer 2

通过向<link>元素添加媒体查询，不会阻止浏览器下载该CSS文件。

带有媒体查询的css文件将被下载，但它可能不是关键资源，也可能不会呈现阻塞。

Finally, note that "render blocking" only refers to whether the browser has to hold the initial rendering of the page on that resource. In either case, the browser still downloads the CSS asset, albeit with a lower priority for non-blocking resources.

更多详细信息https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

加载较少的文件

2 个答案: