Блог

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

В любом случае, я знаю, что медиа-запросы влияют на то, как мобильные устройства отображают страницу на разных размерах экрана, но я хочу знать, есть ли только один медиа-запрос, который может повлиять на ВСЕ мобильные устройства независимо от размера экрана?

Я просто хочу убедиться, что это не повлияет на рабочий стол.

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

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

Надеюсь, это имеет смысл.

Как всегда, вы все потрясающие!

Спасибо за вашу помощь!

рад, что вы решили изучать веб-разработку.

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

 @media (min-width: 320px) {}
@media (min-width: 768px) {}
@media (min-width: 1024px) {}
@media (min-width: 1220px) {}
@media (min-width: 1440px) {}
  

Таким образом, вы видите, что к каждому медиа-запросу можно прикрепить несколько новых стилей для выбранного размера запроса. Чтобы упростить написание стилей и не переопределять все эти вещи при каждой новой ширине, вы можете сделать что-то вроде этого:

 @media (min-width: 320px) {} // for general stylings (both, mobile amp;amp; desktop)
@media (max-width: 767px) {} // for only styles between 320px and 768px (most mobile devies)
@media (min-width: 768px) {}  // general desktop amp;amp; tablet styles if needed
@media (min-width: 768px) and (max-width: 1024px) {} // only tablet styles
@media (min-width: 1025px) // start with desktop styling
  

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

 All mobile styles attached only between 320px and 1024px

@media (min-width: 320px) and (max-width: 1024px) {
  .nav{ background: red; }
}

All desktop styles attached only after 1025px
@media (min-width: 1025px) {
  .nav{ background: green; }
}
  

Все эти медиа-запросы просто показывают разную ширину, вы также можете сделать это по высоте, но это сложнее из-за размеров устройства / дисплея.

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

Я надеюсь, что это поможет вам! Если у вас есть какие-либо вопросы о медиа-запросах и о том, как их правильно писать, MDN — хороший ресурс: MDN — Медиа-запросы

Для тех, кто ищет общий и простой медиа-запрос для мобильных устройств, я бы предложил следующее:

@media screen and (max-width: 767px) {}

Аналогично предложению @m4n0, но это правильный запрос, включающий «и». Это хорошее начало, а затем вы можете продолжить определять дополнительные точки останова, поскольку вам нужно больше времени для реагирования.

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

 @media screen  (max-width: 767px) { }
  

Вы также можете использовать ориентацию для задания медиа-запросов, как показано ниже

 @media screen  and (max-device-width: 480px) and (orientation: portrait) { 
  Your classes here
}

@media screen  and (max-device-width: 640px) and (orientation: landscape)  {
  Your classes here
}
  

Отличный вопрос, устройства Android и Apple в моем поиске обычно находятся в пределах 450 пикселей в портретном и 800 пикселей в альбомной ориентации, я бы посоветовал вам создать медиа-запрос для обоих этих размеров, и вы бы охватили большое количество мобильных устройств как в портретном, так и в альбомном режимах. Если вы ориентируетесь на конкретное устройство, я бы посоветовал посмотреть эти конкретные размеры области просмотра экрана и настроить или добавить дополнительные медиа-запросы, чтобы охватить эти случаи. Надеюсь, это поможет! Продолжайте учиться.

Обратите внимание на следующую ссылку для популярных размеров разрешения экрана устройства
https://mediag.com/blog/popular-screen-resolutions-designing-for-all/

Спасибо следующей ссылке за отличное объяснение адаптивного дизайна
https://www.toptal.com/responsive-web/introduction-to-responsive-web-design-pseudo-elements-media-queries