个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我目前正在使用 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 规则(无论它们是什么)并有一个输出(appendto？)位 html 来复制和粘贴吗？
编辑:如果我创建了一个“应用程序”，我可以复制并粘贴原始 CSS 并让 jQuery 查找/替换/整理媒体查询，以便将所有相同的内容放在一起吗？
编辑:为了避免混淆，我想创建一个应用程序，它采用 RAW 副本并粘贴一些文本(即 CSS)，然后将正确的 @media 规则编译并合并在一起。然后您可以将其粘贴回您的代码编辑器中。实际上并没有“接触”一个 CSS 文件
最佳答案
接受的答案确实解释了如何构建请求的应用程序？如今，这可以通过使用 browersify 轻松完成。 .此解决方案还使用 group-css-media-queries .
现在你可以创建一个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
关于jquery - 通过 jquery 合并 @media 规则，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10700647/
25
4
0
我需要在 nginx-ingress 版本上允许来自多个来源的请求:http://localhost:4200、http://localhost:4242 等1.7.1.但我无法对多个来源执行此操作，
我正在部署我使用 APIGILITY 开发的 API到 IIS。由于 IIS 不支持 .htaccess，我试图从 .htaccess 文件的内容创建 web.config 文件。我使用 IISv7.
我正在尝试更改上面 css 样式中的“宽度”规则。在“inspect element”中你可以看到宽度是1008px。我不希望它是 1008px 但它不会让我在 css 样式中更改它你可以看到它被“删
外部css赋值有2种方法，我用的是第一种；大多数网站使用第二种方法。我想知道我是否做错了! 第一种方法: 为几乎每个 css 规则创建一个类并在任何地方使用它们。 blah blah .f_
RDF使用 WEB 标识符 (URIs) 来标识资源，使用属性和属性值来描述资源 RDF 资源、属性和属性值 RDF使用 WEB 标识符来标识事物，并通过属性和属性值来描述资源。 关于资源、属性
我想挖掘特定的 rhs 规则。文档中有一个示例证明这是可能的，但仅适用于特定情况(如下所示)。先来一个数据集来说明我的问题: input {b=100002} 0.2500000 0.250000
我想让 nginx 从网站根目录(:http://localhost:8080/)提供一个静态文件，但它为我的代理通行证提供服务；它提供“/”规则而不是“=/”。 这是我的 nginx 配置的样子:
根据gnu make documentation , 如果一个规则通过一次调用生成多个目标(例如，一个配方执行一个带有多个输出文件的工具)，你可以使用 '&:' 规则语法来告诉 make。但是，当在多
我已阅读Firebase Documentation并且不明白什么是 .contains()。 以下是文档中 Firebase 数据库的示例规则: { "rules": { "rooms"
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 6 年前。 Improv
我正在尝试做一些多态性练习，但我无法弄清楚这种多态性是如何工作的。我没有找到任何关于这种练习的深入信息。希望大家能给我一些解释。 练习1: class Top { public void m(
为了调试复杂的 XSLT 转换，我将其分为几个部分:首先构建 %.1.xml，然后使用它构建 %.2.xml ，最后构建 %.3.xml。一切正常，但如果我要求 Make 构建最后一个，Make 总是
我尝试了 hacerrank 的 slove 练习 Click我不知道如何添加这些规则: ► 它可以包含 4 个一组的数字，并用一个连字符“-”分隔。 ► 不得有 4 个或更多连续重复数字。 这是我的
我正在尝试编写一个小测验，我希望“再试一次”按钮遵循与“else”之前的“if”语句相同的规则 using System; public class Program { public stat
在我的 Spring/Boot Java 项目中，我有一组服务方法，例如以下一个: @Override public Decision create(String name, String descr
我正在阅读 Covariant virtual function .上面写着 假设 B::f 覆盖了虚函数 A::f。如果满足以下所有条件，A::f 和 B::f 的返回类型可能不同: 1) The
我工作的公司想要分发(在公共(public)链接中)具有内部签名的应用程序。我很确定 Apple 否认这种事情，但我在官方文档/契约(Contract)中没有找到任何相关信息。 有谁知道它到底是如何工
我是 CSS 新手。我观察到一个奇怪的 CSS 行为，其中一个元素具有以下 CSS 属性 .container .header{ color: #FFFFFF; font-size: 2em;
这个问题在这里已经有了答案: Is there a CSS selector for elements containing certain text? (21 个答案) 关闭 7 年前。
我有以下 CSS: workoutcal.css: .errorlist{ color:red; } 以下基本模板: base.html: {% load static %} {
我是一名优秀的程序员,十分优秀！