Применение класса на основе медиазапроса - необходим чистый CSS или HTML

Мне нужен медиа-запрос (или аналогичный), использующий чистый CSS, HTML или, возможно, LESS (так как долго предварительно скомпилированный не будет работать), чтобы применить определенный класс к идентификатору в зависимости от высоты экрана. Я устанавливаю классы, определенные Add2Any - не свойства css.

jsfiddle

Что я хочу сделать, это установить div #add2any это для маленьких экранов.

  <div id="add2any" class="a2a_kit a2a_default_style">

В противном случае я хочу это:

  <div id="add2any" class="a2a_kit a2a_kit_size_32 a2a_default_style">

Возможно ли это и как?

Ищите не Javascript/ не Jquery решение, чтобы избежать задержки во времени и иметь <div> для каждого стиля и показывая только соответствующий.

Фон

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

CSS пока что

@media screen and (max-height: 430px) {
  .a2a_button_google_plus, .a2a_button_pinterest, .a2a_button_print { display:none;}
  #add2any a, hr#add2any, hr#add2any a, .a2a_divider { font-size: 15px; padding-top:2px; padding-bottom:-2px; }
  .a2a_divider { top:5px ; position: relative}
}

редактировать

Невозможно найти решение ни по одному из них, я использую основу Foundation.

условный CSS на основе div, а не screen

Переключить мобильное представление в Foundation, используя класс CSS или JS

Как переключить класс, используя чистый JavaScript в HTML

** Редактировать 2 **

Предложения использовать Less или Sass из этого вопроса кажутся излишними, поскольку решение будет необходимо на каждой странице.

Самостоятельное размещение сценария и добавление в него некоторого javacript может быть лучшим выбором, так как имена классов, похоже, останутся прежними, даже если сценарий изменится, поскольку все инструкции Customize поощряют прямое использование имен классов AddToAny.

Источник

2 ответа

Решение

отредактированный

Если у вас есть этот HTML:

 <div  class="a2a_kit a2a_default_style">
 <div  class="a2a_kit a2a_kit_size_32 a2a_default_style">

Вы можете сделать медиа-запрос следующим образом:

 /* first state */
 .a2a_kit { display: block; }
 .a2a_kit.a2a_kit_size_32 { display: none; }

 @media screen and (max-height: 430px) {
     /* reverse behaviour on max-height 430 px */
     .a2a_kit { display: none; }
     .a2a_kit.a2a_kit_size_32 { display: block; }
 }
Источник

Вам просто нужно настроить измененные стили в ваших медиа-запросах:

#add2any {
   /* any styles you want to apply all the time */
   background-color: blue;
   width: 100px;
   color: white;
}


@media (min-width: 420px) and (max-width: 760px) {
    /* styles when screen is greater than 420px wide but less than 760px */
    /* omitting the 'and (max-width: 760px)' would cause these styles to apply at any width above 420px unless overridden by another media query */
    #div1 {
        background-color: red;
        width: 300px;
        color: yellow;
    }
}

@media (min-width: 760px) {
    /* styles when screen is greater than 760px wide */
    #div1 {
        background-color: green;
        width: 600px;
    }
}

JSFiddle Demo

* если вы не хотите стилизовать на основе идентификатора, вы можете добавить уникальный класс и стиль, которые

Источник
Другие вопросы по тегам