2

私は少ないCSSを学び始めました。異なる less ファイルをインポートする可能性はありますか

ビュー ポート メタ タグに基づきます。さまざまな解像度用に独自の少ないファイルを作成したいと考えています。

また、「ビューポートのメタ タグはどのように機能しますか?」についても知りたいです。

メタタグから知りたい

メタ タグの "width" プロパティと対応するメディアにデバイス幅を設定する方法

クエリが実行されます。

4

2 に答える 2

1

私の知る限り、ビューポートのメタタグではこれを行うことはできません。これにはメディアクエリを使用できます: 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>

with: 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 経由でインストールすると、サーバー側コンパイル用のコンパイラもインストールされます。

メディア クエリを使用してさまざまなリソースを読み込む代わりに、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 に答える