Css media add class

Css media query adding class to HTML

You can use pure css to achieve this by just replicating the list-item and toggle with media query like this:, It is quicker , but in long term toggle class is good , when ever we need to add the class. Whereas i like your answer simple and easy to implement .good job ! – Shelly Apr 12 ’15 at 20:12 , What would be the pitfalls and potentially overpowered exploits of an event/action recording and replay magic system? ,Connect and share knowledge within a single location that is structured and easy to search.

@media (max-width: 1000px) < .bigScreen < display:none; >.smallScreen < display:block; >> @media (min-width: 1001px) < .bigScreen < display:block; >.smallScreen < display:none; >> 

Answer by Ivy Chan

You can have a set of CSS properties that will only apply when the browser window is wider than its height, a so called «Landscape» orientation: ,Using an additional value: In the example below, we add an additional media query to our already existing one using a comma (this will behave like an OR operator):,Media queries can also be used to change layout of a page depending on the orientation of the browser.,You can also use media queries to change the font size of an element on different screen sizes:

Min Width to Max Width

You can also use the (max-width: ..) and (min-width: ..) values to set a minimum width and a maximum width.

Answer by Maci Bates

In Media Queries Level 4 this can be written as:,CSS Animations Between Media Queries,Beginner’s guide to media queries,Media queries are used for the following:

Answer by Briella Andrews

/* Large desktops and laptops */ @media (min-width: 1200px) < >/* Landscape tablets and medium desktops */ @media (min-width: 992px) and (max-width: 1199px) < >/* Portrait tablets and small desktops */ @media (min-width: 768px) and (max-width: 991px) < >/* Landscape phones and portrait tablets */ @media (max-width: 767px) < >/* Portrait phones and smaller */ @media (max-width: 480px)

Источник

‘css media query adding class to HTML

You can use pure css to achieve this by just replicating the list-item and toggle with media query like this:

@media (max-width: 1000px) < .bigScreen < display:none; >.smallScreen < display:block; >> @media (min-width: 1001px) < .bigScreen < display:block; >.smallScreen < display:none; >> 

Solution 2: [2]

CSS is just a styling language, it cannot actually edit the HTML.

If you want to actually make changes to the HTML, use javascript:

var $homeIcon = $('.fa-iconname'); $(window).resize(function() < if (window.innerWidth ); 

var homeIcon = document.querySelector('.fa-home'); window.onResize = function() < if (window.innerWidth ; 

Solution 3: [3]

You can not do that with css, but you can with JavaScript or jQuery.

fa-2x is essentialy: font-size: 2em; . So, you can do this:

Solution 4: [4]

Toggle class lg-2x on element li when the window size is less than 1000px .

$( window ).resize(function() < if($(window).width() <=1000) < $('i').toggleClass(function() < if ( $( this ).is( ".lg-2x" ) ) < console.log("class already there good to go"); >else < $( this ).addClass("lg-2x"); >> >else < $('i').removeClass("lg-2x"); >>); 

Solution 5: [5]

You can create an equivalent class for bigger screen and leave it empty:

and assign it to the html element from the beginning.

Solution 6: [6]

Use a class identified as a class whose name indicates it is affected by media queries: media-lg-2x<>

 .media-lg-2x<> @media (max-width: 1000px) < .media-lg-2x < font-size: 1em; >> @media (min-width: 1000px) < .media-lg-2x < font-size: 2em; >> 

I prefer to keep content confined to a single instance, and deal with display issues in code.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Источник

Как правильно оформлять медиазапросы: медиазапросы внутри класса или классы внутри медиазапроса?

Хочу понять, какие преимущества есть у первого и второго варианта и какой из них более правильный.

Если предполагается, что никто после вас не будет редактировать выходной CSS, и весь проект будет собираться сборщиком, то второй вариант удобнее, т.к. получается удобный компонентный подход.
Допустим, есть компонент "кнопка", и для него отдельный файл /blocks/button.scss, очень удобно писать стили для этой кнопки только в этом файле. И если соблюдать БЭМ, если создавать переменные, то позже, этот компонент (блок) можно будет использовать в других проектах, без дополнительного редактирования. Скопировал файл, поменял переменные (для оформления, цвет, отступы, размеры, шрифт и.т.д.), подключил и готово.
Но одно замечание, лучше сразу определите миксины (или переменные) для этих медиа запросов, чтобы не было сотни разных медиазапросов аля 300px, 320px, 400px и.т.д. Можно позаимствовать из Bootstrap 4

Первого варианта придерживаюсь при написании стилей на чистом css и без сборщиков, т.к. легче писать последовательно для разных устройств. Но такое случается редко, только если поддерживать старый проект.

У второго варианта преимущество - группировка медиа-запросов по классам, а не смешивание всего в одну кашу.

Почему все молчат о том, что второй вариант нарушает синтаксис CSS и не будет работать в принципе?!

Автор не упоминает препроцессоры, в тегах тоже нет. Значит речь идёт о нативном css, в котором только первый вариант и возможен.

НО, даже в первом варианте я категорически не рекомендую писать так, как вы написали. Гораздо лучше и удобнее будет так:

/*== Какой-то блок на странице */ .class-1 < /* стили для экранов 767px и менее */ >@media (max-width: 767px) < .class-1 < /* стили для экранов 767px и менее */ >> /*== Какой-то другой блок на странице */ .class-2 < /* стили для экранов 767px и менее */ >@media (max-width: 767px) < .class-2 < /* стили для экранов 767px и менее */ >> /*== И так далее… */ …

Код должен быть структурирован. Стили, описывающие отдельный селектор, всегда должны быть все вместе и рядом.

А если вы собираете стили препроцессором, то наверняка у вас описания всех селекторов будут раскиданы по отдельным файлам. Медиазапрос для селектора пишете в том же файле, где и основной стиль.

Повторю ещё раз: главное — структурированность кода! Пишете один раз, читаете и дорабатываете — сотни. Облегчайте себе будущие чтение и модификацию кода, который пишете.

Источник

Как с «переключать» CSS-классы с помощью media queries?

Как можно сделать так, чтобы при определенной ширине экрана элемент использовал правила из одного из своих классов, а при другой - из другого?
(Пример: в Bootstrap, например, есть классы ширины колонок - col-xs, col-md, и т.д., при изменении размера экрана элементы используют класс с префиксом, соответствующим размеру - xs для телефонов, sm для планшетов и т.д.)

взгляните на grid.less в поставке bootstrap, сразу все поймете. Если не хотите заморачиваться, то проще всего применять один класс и описывать разные свойства для каждого media query

если взяли grid.less для себя, то стоит помнить, что там используются переменные, которые раскрыты, по-моему, в variables.less. Иначе у вас ничего не заработает.

Да нет, написал свое кривое решение (с рекурсивной генерацией колонок через LESS). Вроде бы, работает нормально.

Как обычно. Просто в CSS-файле указываете соответствующие параметры. При этом даже нет надобности динамически менять класс блоков в зависимости от устройства, либо элементам устанавливать несколько классов "на все случаи жизни" (по-моему, это бред). В первый файл сохраните стили для мобильной версии (без media), а во второй - стили для остальных устройств, используя код ниже.

Например, есть у вас на странице блок с классом test.

/* Смартфоны (портретный и ландшафтный режимы) */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) < /* Здесь задаем стили для браузеров, чья минимальная ширина - 320px, максимальная - 480px. Далее - по аналогии. */ .test < background: black; >> /* Смартфоны (ландшафтный режим) */ @media only screen and (min-width: 321px) < .test < background: red; >> /* Смартфоны (портретный режим) */ @media only screen and (max-width: 320px) < .test < background: blue; >> /* Планшеты (портретный и ландшафтный режимы) */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) < .test < background: yellow; >> /* Планшеты (ландшафтный режим) */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) < .test < background: grey; >> /* Планшеты (портретный режим) */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) < .test < background: green; >> /* Ноутбуки и ПК */ @media only screen and (min-width: 1224px) < .test < background: orange; >> /* Большие дисплеи */ @media only screen and (min-width: 1824px) < .test < background: pink; >>

Источник

Как с «переключать» CSS-классы с помощью media queries?

Как можно сделать так, чтобы при определенной ширине экрана элемент использовал правила из одного из своих классов, а при другой - из другого?
(Пример: в Bootstrap, например, есть классы ширины колонок - col-xs, col-md, и т.д., при изменении размера экрана элементы используют класс с префиксом, соответствующим размеру - xs для телефонов, sm для планшетов и т.д.)

взгляните на grid.less в поставке bootstrap, сразу все поймете. Если не хотите заморачиваться, то проще всего применять один класс и описывать разные свойства для каждого media query

если взяли grid.less для себя, то стоит помнить, что там используются переменные, которые раскрыты, по-моему, в variables.less. Иначе у вас ничего не заработает.

Да нет, написал свое кривое решение (с рекурсивной генерацией колонок через LESS). Вроде бы, работает нормально.

Как обычно. Просто в CSS-файле указываете соответствующие параметры. При этом даже нет надобности динамически менять класс блоков в зависимости от устройства, либо элементам устанавливать несколько классов "на все случаи жизни" (по-моему, это бред). В первый файл сохраните стили для мобильной версии (без media), а во второй - стили для остальных устройств, используя код ниже.

Например, есть у вас на странице блок с классом test.

/* Смартфоны (портретный и ландшафтный режимы) */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) < /* Здесь задаем стили для браузеров, чья минимальная ширина - 320px, максимальная - 480px. Далее - по аналогии. */ .test < background: black; >> /* Смартфоны (ландшафтный режим) */ @media only screen and (min-width: 321px) < .test < background: red; >> /* Смартфоны (портретный режим) */ @media only screen and (max-width: 320px) < .test < background: blue; >> /* Планшеты (портретный и ландшафтный режимы) */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) < .test < background: yellow; >> /* Планшеты (ландшафтный режим) */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) < .test < background: grey; >> /* Планшеты (портретный режим) */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) < .test < background: green; >> /* Ноутбуки и ПК */ @media only screen and (min-width: 1224px) < .test < background: orange; >> /* Большие дисплеи */ @media only screen and (min-width: 1824px) < .test < background: pink; >>

Источник