2

我开始学习较少的 CSS。有没有可能导入不同的less文件

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

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

我想从元标记中知道

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

查询被执行。

4

2 回答 2

1

AFAIK 你不能用视口元标记来做到这一点。您可以为此使用媒体查询：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 代码。当通过 npm 在服务器上安装 LESS 时，也会安装一个用于服务器端编译的编译器。

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

p{color:green;}
@media(min-width: 768px)
{
    p{color:red;}
}
于 2013-11-18T19:33:46.073 回答
0

通过向元素添加媒体查询，<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

于 2019-03-10T10:38:45.580 回答