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 查找/替换/整理媒体查询，以便所有相同的查询都在一起吗？

编辑：希望能阻止任何混乱，我想创建一个应用程序，它需要一个原始副本和粘贴的文本位（这将是 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-responsive-websites/

于 2012-11-16T05:44:02.560 回答