Question

我目前正在使用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的输出（appendto？）位来复制和粘贴？

编辑：如果我创建了一个'应用程序'，我可以复制并粘贴原始CSS并获取jQuery来查找/替换/整理媒体查询，以便所有相同的一起在一起吗？

编辑：为了避免任何混淆，我想创建一个应用程序，它需要一个RAW副本并粘贴一些文本（这将是CSS），然后编译并合并正确的@media规则。然后您可以将其粘贴回代码编辑器。实际上并没有“触摸”CSS文件

Answer 1

接受的答案是否解释了如何构建所请求的应用程序？现在，使用browersify可以很容易地做到这一点。此解决方案还使用group-css-media-queries。

安装browserify：npm install -g browserify
npm install group-css-media-queries
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

Answer 2

您可以合并所有类似的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-responsive-websites/

通过jquery合并@media规则

2 个答案: