1

私は現在、LESSを使用してメディアクエリを「バブル」しています。したがって、出力されたCSSは次のようになります-

header {
  color: red;
}
@media only screen and (min-width: 768px) {
  header {
    color: green;
  }
}
@media only screen and (min-width: 1024px) {
  header {
    color: blue;
  }
}

section {
  color: green;
}
@media only screen and (min-width: 768px) {
  section {
    color: blue;
  }
}
@media only screen and (min-width: 1024px) {
  section {
     color: red;
  }
}

ご覧のとおり、使用されているメディアクエリごとに、要素（ヘッダー/セクションなど）ごとに個別のルール宣言があります。

jQueryを使用してCSSファイルを調べ、すべての類似した@mediaルール（それらが何であれ）を「照合」し、コピーして貼り付けるためのhtmlの出力（追加？）ビットを使用できますか？

編集：「アプリ」を作成した場合、生のCSSをコピーして貼り付け、jQueryでメディアクエリを検索/置換/照合して、すべて同じクエリをまとめることができますか？

編集：混乱を防ぐために、RAWコピーと貼り付けられたテキスト（CSSになります）を取得して、正しい@mediaルールをコンパイルしてマージするアプリを作成したいと思います。その後、コードエディタに貼り付けることができます。実際にはCSSファイルに「触れる」ことはありません

4

2 に答える 2

1

受け入れられた回答は、要求されたアプリを構築する方法を説明していますか？現在、これはbrowersifyを使用して簡単に行うことができます。このソリューションでは、group-css-media-queriesも使用されます。

  1. browserifyをインストールします：npm install -g browserify
  2. npm install group-css-media-queries
  3. npm install jquery（これが質問で尋ねられる主な原因）

main.jsこれで、 ：を作成できます。

var gcmq = require('group-css-media-queries');
var $ = require('jquery');
$( document ).ready(function() {
$('#css').submit(function(e){
$('#grouped textarea').val(gcmq($('#css textarea').val()));  
e.preventDefault();    
});
});

次に、コンソールで実行します。

>> browserify main.js -o app.js

結果app.jsは、HTMLファイルに含めることができます。

<script type="text/javascript" src="app.js"></script>

アプリのHTMLページは、次のようになります。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Merge Media queries</title>
  <script type="text/javascript" src="app2.js"></script>    
</head>

<body>
<h1>Unmerged CSS code:</h1>    
<form id="css">
<textarea id="csscode" cols="50" rows="10">header {
  color: red;
}
@media only screen and (min-width: 768px) {
  header {
    color: green;
  }
}
@media only screen and (min-width: 1024px) {
  header {
    color: blue;
  }
}

section {
  color: green;
}
@media only screen and (min-width: 768px) {
  section {
    color: blue;
  }
}
@media only screen and (min-width: 1024px) {
  section {
     color: red;
  }
}</textarea>
<input type="submit" value="merge @media">
</form><br>
<h1>Merged @media:</h1> 
<form id="grouped">  
<textarea id="groupedcode" cols="50" rows="10"></textarea>    
</form>    
</body>
</html>

デモ：http ：//codepen.io/bassjobsen/pen/NqrJeM （JSコードが大きいためにロードが遅くなる可能性があります）、http：//codepen.io/bassjobsen/pen/rVLgod（jQueryなしでも同じ（以下を参照））および縮小されたJS、より速くロードする必要があります）

フォームの処理にのみjQueryを使用すると、多くのオーバーヘッドが発生することに注意してください。main.jsでプレーンJavaScriptを使用する可能性：

var gcmq = require('group-css-media-queries');
window.onload = function () {
    document.getElementById("css").onsubmit = function onSubmit(form) {
        var unmerged = document.getElementById('csscode').value;
        document.getElementById('groupedcode').value = gcmq(unmerged);
        return false;
    }
}

独自のアプリを作成する代わりに、@ mediaのマージに後処理プラグインを使用することを検討する必要があります。https ：//stackoverflow.com/a/30325426/1596547を参照してください。

于 2015-05-19T19:51:43.863 に答える
0

同様のCSSをすべてマージでき、メディアクエリサイズの形式を次のように降順で記述する必要があります。

header {
 color: red;
}
section {
   color: green;
}
@media only screen and (min-width: 1024px) {
   header {
    color: blue;
   }
   section {
    color: red;
  }
}
@media only screen and (min-width: 768px) {
   section {
    color: blue;
   }
   header {
    color: green;
   }
}

参考までにこれをチェックしてください

http://stackcomplete.com/media-queries-for-adaptive-to-sensitive-websites/

于 2012-11-16T05:44:02.560 に答える