Объединить правила @media через jquery

В настоящее время я использую 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-файла


jquery css media-queries
person Stuart Robson    schedule 22.05.2012    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете объединить все похожие 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/

person Dhamu    schedule 16.11.2012

arrow_upward
1
arrow_downward

Принятый ответ объясняет, как создать запрошенное приложение? В настоящее время это легко сделать с помощью browersify. Это решение также использует group-css-media-query.

  1. установить браузер: npm install -g browserify
  2. npm установить группу css-media-query
  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 только для обработки формы, вы создадите много накладных расходов. Возможно использование простого JavaScript в вашем main.js:

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

person Bass Jobsen    schedule 19.05.2015