Media Queries - отключать и подключать

Zacker2

Zacker2

Гуру форума
Регистрация
19 Фев 2013
Сообщения
242
Реакции
75
Сайт на ворд пресс адаптивный (media).
ВОРД ПРЕМСС - это уточнение cms, не более того...

Вопрос:
Возможно ли в случаи с Media Queries переключать из мобильной версии на обычную, и наоборот. Тоесть вопрос относительно того, можно ли отключать медиа, и снова по желанию пользователя использовать их?
Интересует есть ли подобная технология, мануал или может быть плагин...
 
Можно вывести все стили с Media Queries в отдельный CSS файл. А далее пишется небольшое JS/JQUERY решение, которое отключает этот css файл и обратно подключает (в зависимости от выбора пользователя нужной опции - мобильная версия или нет) и естественно кэшировать это дело.
 
Подскажите пожалуйста пример, где используется подобная схема
 
Zacker2 написал(а):
Подскажите пожалуйста пример, где используется подобная схема
Нажмите для раскрытия...

Готовых примеров не встречал, это сугубо моя мысль и идея по реализации данной задачи.

Для теста:

Index.html

HTML: 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Change</title>
 
<script type="text/javascript" src="jquery-1.3.min.js"></script>
<script type="text/javascript" src="media.js"></script>
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="media.css" type="text/css" rel="stylesheet" id="media" />

</head>
<body>

      <div class="mobile_version">Мобильная версия</div>
      <div class="desktop_version">Десктопная версия</div>

</body>
</html>

Jquery библиотеку не вкладываю, не забудьте ее подключить.

media.js

Код: 
$(function () {

/* Desktop VERSION - Remove Media */
$(".desktop_version").click(function() {
   //$("LINK[href*='media.css']").remove();
   $("#media").remove();
});
/* Desktop VERSION - Remove Media */


/* Responsive VERSION - ADD media */
$(".mobile_version").click(function() {
   $('head').append($('<link rel="stylesheet" type="text/css" id="media" />').attr('href', 'media.css'));
});
/* Responsive VERSION - ADD media */

});

style.css

Код: 
body { background: #000; }
.mobile_version,
.desktop_version { cursor: pointer; color: #3d558c; font-size: 14px; text-decoration: underline; display: inline-block; }

media.css

Код: 
@media only screen and (max-width: 960px){       
   
   body { background: #cecece !important; }

}

P.S. Написал лишь небольшой, но рабочий пример БЕЗ кэширования. С кэшированием - это уже будет полностью готовое решение, которое можно внедрить куда угодно. Это как одна из вариаций реализации данной задачи. Разными способами можно решить эту задачу.
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху