Как сделать медиа квери только для мобильных?

Question

[LissaAlbatross]

Делаю так:
@media (max-width: 920px)
Но у заказчика на мобильном width 1080px. Как определить медиа квери только для мобильных? Вопрос возник из-за того, что я поменяла код в @media (max-width: 920px), но он изменений на своём телефоне не видит. Или это всё же не из-за расширения?

Comments

[LissaAlbatross]

Nikolay Petyukh, а может там сайт закешироваться? В ноуте я жму шифт ф5 и всё обновляется, как с этим в мобильных? а по сайту у него 360*560

[Rustam Bainazarov]

LissaAlbatross, такого мобильного 1080px не бывает. Даже если у него по ширине экран имеет 1080px, объясните ему, что физическое разрешение экрана — не то же самое, что viewport в браузерах.

Пришлите сайт, кстати. Вы могли тупо неверно поместить ваши правки в иерархии кода, поэтому он их и не видит.

[LissaAlbatross]

Рустам Байназаров, спасибо. А какой самый большой экран для мобильного? Я правильно ставлю 920px?

[Rustam Bainazarov]

LissaAlbatross, нет, неправильно. Это уже планшеты.

Самый большой — не знаю, я видел что-то из разряда ~500px. Изучайте рынок устройств. Самый широкий viewport у iPhone, например, — это 414px в портретном режиме (Plus'ы и XS Max).

Но! Получается пропасть между условными 500px и 768px (планшеты, iPad портрет). Поэтому я ставлю универсальные max-width: 767px для телефонов. Это учитывает практически все телефоны и планшеты, кроме, по сути, 7-дюймовых старых планшетов на Android (там 600 px по ширине, поэтому там будет мобильная верстка). Так что совсем не страшно, ибо на рынке их нет уже.

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

[LissaAlbatross]

Рустам Байназаров, test-for-work.zzz.com.ua/mindform-mobile/html/serv...
Надо, чтобы текст был justify и 1em, а было 1.7.

[Rustam Bainazarov]

LissaAlbatross, какие правки вы делали и что из этого не работает? Укажите номер строки кода, например.

А вижу, подскажу через 40 минут, как дойду домой. Пока что с телефона пишу.

[LissaAlbatross]

Рустам Байназаров, css.css 28 media (max-width: 920px) { добавила

.fig, h2, .detail {text-align: center;}
a, li, h2 {font-size: 1em;} 
ul{
text-align: justify;
}

А у него шрифт не выровнен и огромаден.

[posters]

Если не знаете какие цифры прописать в медиа запросе, посмотрите как это сделано у bootstrap 4

[Rustam Bainazarov]

LissaAlbatross, стили медиазапросов должны идти после основных стилей. У вас же наоборот: основные стили на строке 128, а медиазпаросы почему-то на 32-й:

[LissaAlbatross]

Рустам Байназаров, не понимаю, откуда 128-я строка. Это что за файл? Из бутстрапа? Он у меня позже определён, чем мой сss. Ошибка из-за этого происходит? Кстати, а какой браузер Вы используете для такого отображения css?
posters, это? https://bootstrap-ru.com/scaffolding.php

/* Landscape - телефоны */
  @media (max-width: 480px) { ... }
 
  /* От ландшафтного экрана телефона до потретного планшета */
  @media (max-width: 767px) { ... }
 
  /* От портретного планшета до ландшафтного экрана и настольных дисплеев */
  @media (min-width: 768px) and (max-width: 979px) { ... }
 
  /* Большой дисплей */
  @media (min-width: 1200px) { ... }

[Rustam Bainazarov]

LissaAlbatross, Chrome. В Firefox всё то же самое.

Да, точно, это другой файл к тому же. Не знаю, что за файл, смотрите сами. Если это файл со сбросами стилей, то, если что, алгоритм тот же — нужно разместить его перед основным файлом.

[Rustam Bainazarov]

LissaAlbatross, можно и так сказать, вот только про 480 пикселей там уже устаревшее. Это старые устройства, новые же имеют по 600–1000 пикселей ширины в портретном режиме, ибо экраны больше стали.

Советую пока забить на портретный режим телефонов. Там много отступлений для него. У вас там будет на большинстве запускаться вёрстка под планшеты в портретной ориентации. Потом уже точечно можете править сомнительные моменты с помощью комбинирования выборки по ширине и высоте.

[LissaAlbatross]

Рустам Байназаров, сейчас всё верно? И почему у меня этот глюк не отображался в хромиуме (убунта 14.04) и на моём телефоне?

Оффтопик. Кстати о комбинированной высоте. Я отсюда взяла размеры экранов нетбуков, ноутбуков и десктопов. Я заметила, что при одинаковой ширине, но разной высоте на одном экране хорошо отображается, а на другом перекос. Подскажите, если можете разрешения современных экранов и телевизоров. На какие рассчитывать сайт.:)

[Rustam Bainazarov]

LissaAlbatross, как не отображался? Отображался на телефоне. Шрифт на моём телефоне имел размер 2em.

Теперь же всё нормально, шрифт отображается нужного размера.

[LissaAlbatross]

Рустам Байназаров, а с justify или без? у клиента сейчас без justify и 2em. Обновлял страницу. Могло закешироваться?
У меня глюка не было.

И посмотрите, плз, оффтоп из моего предыдущего сообщения.

[Rustam Bainazarov]

LissaAlbatross, возможно, что кэш. Пусть смотрит в инкогнито. Либо поставьте версию для CSS.


До этого все заголовки были огромные, сейчас всё нормально.

Лучше сначала пройдите курс какой-нибудь, чем заказы принимать, это очень опасно пока с вашими знаниями. Но в любом случае — желаю удачи.

[LissaAlbatross]

Рустам Байназаров, криво сверстала?( Вроде красиво выглядит, первая страница, разве нет? А в чём опасность?(
Спасибо за помощь!

[Rustam Bainazarov]

LissaAlbatross, опасность в том, что клиенты хотят много, а опыта у вас мало.

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

И тут уже вам поможет ваша доходчивость, ум и везение. Если в таком режиме вы сможете быстро получать опыт и быстро расти профессионально, то всё хорошо. Если нет — будет мука, а не работа :))

Пока о красоте и правильности верстки говорить сложно, так как пока что не очень красиво, а сам дизайн очень прост. Учитесь и ещё раз учитесь, тогда всё будет хорошо, желаю удачи! Это не ирония. Если есть возможность попасть куда-нибудь в студию или офис — не теряйте эту возможность.

[LissaAlbatross]

Рустам Байназаров, спасибо за мудрые слова! Учиться и ещё раз учиться.
P.S. А можете подсказать, почему у меня фон идёт не сто процентов, а увеличенный?