@media screen - не всегда работает

  • 6 Ответов
  • 177 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

darkghost

  • Практически профи
  • *******
  • 2100
  • 94
Доброе время суток, Форум!

Казалось бы вопрос пустяковый, но вот сталкиваюсь снова и снова.
Медиа-запрос == @media screen == не всегда хочет работать, особенно, когда указываешь диапазон от и до.
Вот к примеру, если необходимо, чтобы некое правило срабатывало везде, где размер окна 600 и меньше, то записываем
Код
 @media screen and (max-width: 600px) {  класс, стиль }
Тут все понятно
Вот как записать чтобы некое правило срабатывало, например, если размер окна от 600 до 800-та?
Вот с этим не всегда получается

Заранее, благодарен

*

dmitry_stas

  • Профи
  • ********
  • 9653
  • 929
Тут дарят бакс просто за регистрацию! Успей получить!
Все советы на форуме раздаю бесплатно, то есть даром. Индивидуально бесплатно консультирую только по вопросам стоимости индивидуальных консультаций

*

darkghost

  • Практически профи
  • *******
  • 2100
  • 94
Re: @media screen - не всегда работает
« Ответ #2 : 01.06.2017, 13:17:28 »
Если необходимо записать несколько, какая поочередность записи? От больших значений к меньшим
Код
@media screen and (max-width: 1000px) and (min-width: 700px) { класс, стиль }
@media screen and (max-width: 699px) and (min-width: 520px) { класс, стиль }
или как?


*

dmitry_stas

  • Профи
  • ********
  • 9653
  • 929
Re: @media screen - не всегда работает
« Ответ #3 : 01.06.2017, 13:36:43 »
это зависит от того, какую стратегию CSS используете - mobile first или mobile last. почитайте про это. грубо говоря, что без @media у вас указано - для десктопа, или же для мобильных.
Тут дарят бакс просто за регистрацию! Успей получить!
Все советы на форуме раздаю бесплатно, то есть даром. Индивидуально бесплатно консультирую только по вопросам стоимости индивидуальных консультаций

*

darkghost

  • Практически профи
  • *******
  • 2100
  • 94
Re: @media screen - не всегда работает
« Ответ #4 : 01.06.2017, 13:42:38 »
без Медиа --- для дескТопа

*

Septdir

  • Практически профи
  • *******
  • 2144
  • 108
  • JoomlaZen
Re: @media screen - не всегда работает
« Ответ #5 : 01.06.2017, 13:45:47 »
Если необходимо записать несколько, какая поочередность записи? От больших значений к меньшим
Код
@media screen and (max-width: 1000px) and (min-width: 700px) { класс, стиль }
@media screen and (max-width: 699px) and (min-width: 520px) { класс, стиль }
или как?
Обычно от меньшего к большему. + у тебя сам код выглядит не стабильно Да и зачем в таком случае писать диапазон. CSS читаеться сверху вниз и пишеться так же.
Код: css
/* Дефолтное - меньше 520 */
.class {
background: #000;
}
/* от 520 до 1000 */
@media (min-width: 520px) {
.class {
background: #FF0;
}
}
/* от 1000 и до конца */
@media (min-width: 1000px) {
.class {
background: #FFF;
}
}

P.S совет зайти в любой фремворк bs или uikit и посмотри.
без Медиа --- для дескТопа
Не мобильники тоже разные бывают.Даже ноуты есть 1366, а есть и 3840
« Последнее редактирование: 01.06.2017, 13:49:22 от Septdir »
Не можете справиться с задачей сами пишите, решу ее за вас, не бесплатно*.
*Интересная задача, Деньги или Бартер. Натурой не беру!
________
Мои Контакты | JoomlaZen

*

dmitry_stas

  • Профи
  • ********
  • 9653
  • 929
Re: @media screen - не всегда работает
« Ответ #6 : 01.06.2017, 14:08:11 »
без Медиа --- для дескТопа
в таком случае это Mobile Last. считается устаревшим, и в фреймворках типа бустрапа уже не используется. для Mobile Last нужно указывать от большей ширины к меньшей, т.е. без media - CSS для самой большой ширины, и так далее до телефонного портрета. но если юзаете при этом какой то фреймоворк, который написан по Mobile First (а повторюсь они сейчас наверное уже все по нему написаны) - возможны нестыковки. правильнее делать как написал Septdir - без медиа для телефонного портрета, и дальше по возрастающей.
Тут дарят бакс просто за регистрацию! Успей получить!
Все советы на форуме раздаю бесплатно, то есть даром. Индивидуально бесплатно консультирую только по вопросам стоимости индивидуальных консультаций