Force запрос СМИ для применения

У меня есть этот HTML и CSS код:Force запрос СМИ для применения

<div class="wrapper"> 
    <div class="a"></div> 
    <div class="b"></div> 
</div> 

@media all and (max-width: 400px), (max-height: 300px) { 
    .wrapper .a { 
     .... 
     .... 
    } 
    wrapper. .b { 
     .... 
     .... 
    } 
    .... 
    .... 
}

Теперь я хочу, чтобы каждый раз, когда обертка получает класс «как-маленький», все стили малого экрана будет применяться, даже если экран не маленький. Я не хочу дублировать код css внутри медиа-запроса. Как я могу это решить?

Еще одно решение - принудительное применение мультимедийного запроса. Есть ли способ сделать это?

источник

2013-03-27 Naor

Возможно с [* less *] (http://lesscss.org). –

@JaredFarrish: Даже с меньшим количеством звука или стилуса обработанный css будет дублироваться. – Naor

Интересный вопрос, это только для цели отладки? – zessx

-1

Добавьте тот же класс для этих разделов.

<div class="wrapper"> 
    <div class="makeMeShine a"></div> 
    <div class="makeMeShine b"></div> 
</div>

Если б может иметь свои собственные стили :)

источник

2013-03-27 09:41:58

Что такое "makeMeShine"? Как это связано с запросом на медиа? .. – Naor

makeMeShine - это просто класс, который я добавил. например .makeMeShine {background: red; }. Evey где применяется класс makeMeShine, у вас будет красный фон. –

И как это относится к медиа-запросу ??? .. – Naor

В новых версиях Chrome вы можете "emulate" a mobile device для того, чтобы вызвать/тестируют медиазапросы в настольном браузере. (Internet Exploder 11 has the same behavior!) Возможно, вам придется обновить браузер после применения эмуляции; Chrome 35 все еще частично применяет медиа-запросы до тех пор, пока я не удаляю обновление на соответствующей вкладке.

источник

2014-07-15 14:10:27 zedd45

Вы можете сделать что-то вроде этого с помощью javascript.

В двух словах вы переместите свои медиа-запросы из css и протестируйте их в JS, используя window.matchMedia.

Когда вы знаете, какой из них соответствует, вы можете добавить имя класса в тег <html>, аналогично тому, как работает Modernizr. Поэтому на телефоне вы увидите <html class="like-small">.

Ваш CSS будет написано, чтобы воспользоваться этими классами удобства, а не с использованием нативного медиа-запрос:

.like-small wrapper.a {} 
.like-large wrapper.a {}

(я также хотел бы добавить .not-как-маленький, .not-как- средние классы до <html>, а также для упрощения css)

Итак, теперь, после того, как обычный медиа-запрос сопоставлен, и соответствующее имя класса добавлено к документу, RWD работает практически как обычно. И если вы хотите принудительно создать определенный стиль, вы можете просто переписать имена классов в теге HTML, чтобы повлиять на всю страницу, или добавить имя класса в любой родительский элемент, чтобы воздействовать только на часть страницы.

источник

2014-10-23 14:48:23 wwwmarty

Я знаю, что этот вопрос старый, но, надеюсь, это то, что вы искали (поскольку ответа не было). И я также не знаю, добавило ли класс специфичности к вашему CSS, чтобы ваше требование не повторять CSS.

Вы можете добиться того, что хотите сделать, изменив определение своего @media запроса. В основном, вместо того, чтобы говорить, что вы хотите, чтобы что-то произошло, когда экран становится меньше значения, сохраните свой маленький экран в запросе на медиа-запрос и настройте свои медиа-запросы для больших экранов.

Затем вам нужно просто изменить порядок, который вы называете CSS, и добавить специфику к стилям, которые вы хотите назвать классом like-small.

HTML:

<div class="wrapper like-small"> 
    <div class="a"></div> 
    <div class="b"></div> 
</div> 


<div class="wrapper"> 
    <div class="a"></div> 
    <div class="b"></div> 
</div>

CSS:

.wrapper.like-small .a, 
.wrapper .a { 
     height:200px; 
     width:200px; 
     background:purple; 
    } 

.wrapper.like-small .b, 
    .wrapper .b { 
     height:200px; 
     width:200px; 
     background:blue; 
} 

@media all and (min-width: 400px), (min-height: 300px) { 
    .wrapper .a { 
     height:100px; 
     width:100px; 
    background:yellow; 
    } 
    .wrapper .b { 
     height:100px; 
     width:100px; 
    background:red; 
    } 
}

И скрипку: http://jsfiddle.net/disinfor/70n37hhj/

Надеюсь, это то, что вы были после (через год-полтора назад :)

источник

2014-10-23 15:11:41 disinfor

Вы можете попробовать javascript. Это предложение устанавливает браузер ширины окна просмотра и силы, чтобы применить медиа-запрос:

$('meta[name="viewport"]').prop('content', 'width=400');

Это берется из этого ответа: https://stackoverflow.com/a/20137580/1401341 Как кто-то говорит, что в комментариях, это будет работать только с браузерами, которые поддерживают viewport тега.

источник

2016-05-17 08:35:23 Fernando

Force запрос СМИ для применения

ответ

Смежные вопросы