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

darkghost

  • Живу я здесь
  • 2212
  • 97 / 0
Доброе время суток, Форум!

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

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

dmitry_stas

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

darkghost

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

*

dmitry_stas

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

darkghost

  • Живу я здесь
  • 2212
  • 97 / 0
Re: @media screen - не всегда работает
« Ответ #4 : 01.06.2017, 11:42:38 »
без Медиа --- для дескТопа
*

Septdir

  • Живу я здесь
  • 3370
  • 168 / 4
Re: @media screen - не всегда работает
« Ответ #5 : 01.06.2017, 11: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, 11:49:22 от Septdir »
Не можете справиться с задачей сами пишите, решу ее за вас, не бесплатно*.
*Интересная задача, Деньги или Бартер. Натурой не беру!
CodersRank | Контакты | Мой GitHub | Workshop
*

dmitry_stas

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

Не работает правильно сайт на хосте

Автор Алексей Лоскутов

Ответов: 6
Просмотров: 1395
Последний ответ 21.05.2020, 20:23:57
от xpank
Некорректро работает Lightbox в widgetkit, сдвиг вправо при открытии Lightbox и листании фотографий

Автор twins717

Ответов: 2
Просмотров: 1534
Последний ответ 31.03.2020, 08:13:46
от sivers
Не работает свойство font-weight

Автор dm-krv

Ответов: 11
Просмотров: 3253
Последний ответ 31.08.2018, 09:16:26
от dm-krv
Как правильно прописать @media?

Автор stendapuss

Ответов: 17
Просмотров: 3911
Последний ответ 27.01.2018, 12:02:57
от stendapuss
VT media шаблон в слайдере в IE прогрессбар съезжает вниз

Автор wishlight

Ответов: 0
Просмотров: 1173
Последний ответ 26.04.2017, 19:26:53
от wishlight