Mobile media css query: Responsive Web Design Media Queries

Связанные страницы

Учебное пособие по CSS: Медиа-запросы CSS

Учебное пособие по CSS: примеры медиа-запросов CSS

RWD: адаптивный веб-дизайн с медиа-запросами

Учебное пособие по JavaScript: метод window.matchMedia ()

Медиа-запросы для стандартных устройств

Если ты думаешь, что отзывчивость — это просто, мне жаль тебя, сынок.У нас 99 окон просмотра, но у iPhone только одно.
— Джош Брюэр, 10 марта 2010 г.

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

Если вы ищете исчерпывающий список медиа-запросов, этот репозиторий — хороший ресурс.

Если вы отреагируете на это: , вы никогда не должны основывать точки останова на устройствах !! Вы подметили. У Джастина Эйвери есть хороший пост о возможных подводных камнях при использовании точек останова для конкретных устройств. Выбор точек останова на основе вашего дизайна, а не конкретных устройств — это разумный способ. Но иногда вам просто нужна небольшая помощь, чтобы взять под контроль одну конкретную ситуацию.

Телефоны и карманные компьютеры

  / * ----------- iPhone 4 и 4S ----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 320 пикселей)
  и (максимальная ширина устройства: 480 пикселей)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/ * Портрет * /
только экран @media
  и (минимальная ширина устройства: 320 пикселей)
  и (максимальная ширина устройства: 480 пикселей)
  и (-webkit-min-device-pixel-ratio: 2)
  и (ориентация: портретная) {
}

/* Пейзаж */
только экран @media
  и (минимальная ширина устройства: 320 пикселей)
  и (максимальная ширина устройства: 480 пикселей)
  и (-webkit-min-device-pixel-ratio: 2)
  и (ориентация: альбомная) {

}

/ * ----------- iPhone 5, 5S, 5C и 5SE ----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 320 пикселей)
  и (максимальная ширина устройства: 568 пикселей)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/ * Портрет * /
только экран @media
  и (минимальная ширина устройства: 320 пикселей)
  и (максимальная ширина устройства: 568 пикселей)
  и (-webkit-min-device-pixel-ratio: 2)
  и (ориентация: портретная) {
}

/* Пейзаж */
только экран @media
  и (минимальная ширина устройства: 320 пикселей)
  и (максимальная ширина устройства: 568 пикселей)
  и (-webkit-min-device-pixel-ratio: 2)
  и (ориентация: альбомная) {

}

/ * ----------- iPhone 6, 6S, 7 и 8 ----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 375 пикселей)
  и (максимальная ширина устройства: 667 пикселей)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/ * Портрет * /
только экран @media
  и (минимальная ширина устройства: 375 пикселей)
  и (максимальная ширина устройства: 667 пикселей)
  и (-webkit-min-device-pixel-ratio: 2)
  и (ориентация: портретная) {

}

/* Пейзаж */
только экран @media
  и (минимальная ширина устройства: 375 пикселей)
  и (максимальная ширина устройства: 667 пикселей)
  и (-webkit-min-device-pixel-ratio: 2)
  и (ориентация: альбомная) {

}

/ * ----------- iPhone 6+, 7+ и 8+ ----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 414 пикселей)
  и (максимальная ширина устройства: 736 пикселей)
  и (-webkit-min-device-pixel-ratio: 3) {

}

/ * Портрет * /
только экран @media
  и (минимальная ширина устройства: 414 пикселей)
  и (максимальная ширина устройства: 736 пикселей)
  и (-webkit-min-device-pixel-ratio: 3)
  и (ориентация: портретная) {

}

/* Пейзаж */
только экран @media
  и (минимальная ширина устройства: 414 пикселей)
  и (максимальная ширина устройства: 736 пикселей)
  и (-webkit-min-device-pixel-ratio: 3)
  и (ориентация: альбомная) {

}

/ * ----------- iPhone X ----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 375 пикселей)
  и (максимальная ширина устройства: 812 пикселей)
  и (-webkit-min-device-pixel-ratio: 3) {

}

/ * Портрет * /
только экран @media
  и (минимальная ширина устройства: 375 пикселей)
  и (максимальная ширина устройства: 812 пикселей)
  и (-webkit-min-device-pixel-ratio: 3)
  и (ориентация: портретная) {

}

/* Пейзаж */
только экран @media
  и (минимальная ширина устройства: 375 пикселей)
  и (максимальная ширина устройства: 812 пикселей)
  и (-webkit-min-device-pixel-ratio: 3)
  и (ориентация: альбомная) {

}  

  / * ----------- Galaxy S3 ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 2) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 320 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 2)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 320 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 2)
  и (ориентация: альбомная) {

}

/ * ----------- Galaxy S4, S5 и Примечание 3 ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 320 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 3) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 320 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 3)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 320 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 3)
  и (ориентация: альбомная) {

}

/ * ----------- Galaxy S6 ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 4) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 4)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 4)
  и (ориентация: альбомная) {

}  

  / * ----------- HTC One ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 3) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 3)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 3)
  и (ориентация: альбомная) {

}  

  / * ----------- Google Pixel ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 3) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 3)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 3)
  и (ориентация: альбомная) {

}

/ * ----------- Google Pixel XL ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 4) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 4)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 4)
  и (ориентация: альбомная) {

}  

  / * ----------- Nexus 4 ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 384 пикселей)
  и (высота устройства: 592 пикселей)
  и (-webkit-device-pixel-ratio: 2) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 384 пикселей)
  и (высота устройства: 592 пикселей)
  и (-webkit-device-pixel-ratio: 2)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 384 пикселей)
  и (высота устройства: 592 пикселей)
  и (-webkit-device-pixel-ratio: 2)
  и (ориентация: альбомная) {

}

/* ----------- Нексус 5 ----------- */

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 592 пикселей)
  и (-webkit-device-pixel-ratio: 3) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 592 пикселей)
  и (-webkit-device-pixel-ratio: 3)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 592 пикселей)
  и (-webkit-device-pixel-ratio: 3)
  и (ориентация: альбомная) {

}

/ * ----------- Nexus 6 и 6P ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 592 пикселей)
  и (-webkit-device-pixel-ratio: 4) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 592 пикселей)
  и (-webkit-device-pixel-ratio: 4)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 592 пикселей)
  и (-webkit-device-pixel-ratio: 4)
  и (ориентация: альбомная) {

}  

  / * ----------- Windows Phone ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 480 пикселей)
  and (device-height: 800px) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 480 пикселей)
  и (высота устройства: 800 пикселей)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 480 пикселей)
  и (высота устройства: 800 пикселей)
  и (ориентация: альбомная) {

}  

Ноутбуки

Media Queries для ноутбуков — это своего рода джаггернаут.Вместо того, чтобы нацеливаться на определенные устройства, попробуйте указать общий диапазон размеров экрана, а затем различать экраны сетчатки и экраны без сетчатки.

  / * ----------- Экраны без Retina ----------- * /
@media экран
  и (минимальная ширина устройства: 1200 пикселей)
  и (максимальная ширина устройства: 1600 пикселей)
  и (-webkit-min-device-pixel-ratio: 1) {
}

/ * ----------- Экраны Retina ----------- * /
@media экран
  и (минимальная ширина устройства: 1200 пикселей)
  и (максимальная ширина устройства: 1600 пикселей)
  и (-webkit-min-device-pixel-ratio: 2)
  и (минимальное разрешение: 192 точек на дюйм) {
}  

Таблетки

  / * ----------- iPad 1, 2, Mini и Air ----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 768 пикселей)
  и (максимальная ширина устройства: 1024 пикселей)
  и (-webkit-min-device-pixel-ratio: 1) {

}

/ * Портрет * /
только экран @media
  и (минимальная ширина устройства: 768 пикселей)
  и (максимальная ширина устройства: 1024 пикселей)
  и (ориентация: портретная)
  и (-webkit-min-device-pixel-ratio: 1) {

}

/* Пейзаж */
только экран @media
  и (минимальная ширина устройства: 768 пикселей)
  и (максимальная ширина устройства: 1024 пикселей)
  и (ориентация: альбомная)
  и (-webkit-min-device-pixel-ratio: 1) {

}

/ * ----------- iPad 3, 4 и Pro 9.7 дюймов ----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 768 пикселей)
  и (максимальная ширина устройства: 1024 пикселей)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/ * Портрет * /
только экран @media
  и (минимальная ширина устройства: 768 пикселей)
  и (максимальная ширина устройства: 1024 пикселей)
  и (ориентация: портретная)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/* Пейзаж */
только экран @media
  и (минимальная ширина устройства: 768 пикселей)
  и (максимальная ширина устройства: 1024 пикселей)
  и (ориентация: альбомная)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/ * ----------- iPad Pro 10.5 "----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 834 пикселей)
  и (максимальная ширина устройства: 1112 пикселей)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/ * Портрет * /
/ * Объявляем одно и то же значение для минимальной и максимальной ширины, чтобы избежать столкновения с рабочими столами * /
/ * Источник: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
только экран @media
  и (минимальная ширина устройства: 834 пикселей)
  и (максимальная ширина устройства: 834 пикселей)
  и (ориентация: портретная)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/* Пейзаж */
/ * Объявляем одно и то же значение для минимальной и максимальной ширины, чтобы избежать столкновения с рабочими столами * /
/ * Источник: https: // medium.com / connect-the-dots / css-media-query-for-ipad-pro-8cad10e17106 * /
только экран @media
  и (минимальная ширина устройства: 1112 пикселей)
  и (максимальная ширина устройства: 1112 пикселей)
  и (ориентация: альбомная)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/ * ----------- iPad Pro 12.9 "----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 1024 пикселей)
  и (максимальная ширина устройства: 1366 пикселей)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/ * Портрет * /
/ * Объявляем одно и то же значение для минимальной и максимальной ширины, чтобы избежать столкновения с рабочими столами * /
/ * Источник: https: // medium.com / connect-the-dots / css-media-query-for-ipad-pro-8cad10e17106 * /
только экран @media
  и (минимальная ширина устройства: 1024 пикселей)
  и (максимальная ширина устройства: 1024 пикселей)
  и (ориентация: портретная)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/* Пейзаж */
/ * Объявляем одно и то же значение для минимальной и максимальной ширины, чтобы избежать столкновения с рабочими столами * /
/ * Источник: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
только экран @media
  и (минимальная ширина устройства: 1366 пикселей)
  и (максимальная ширина устройства: 1366 пикселей)
  и (ориентация: альбомная)
  и (-webkit-min-device-pixel-ratio: 2) {

}  

  / * ----------- Galaxy Tab 2 ----------- * /

/ * Портрет и пейзаж * /
@СМИ
  (минимальная ширина устройства: 800 пикселей)
  and (max-device-width: 1280 пикселей) {

}

/ * Портрет * /
@СМИ
  (максимальная ширина устройства: 800 пикселей)
  и (ориентация: портретная) {

}

/* Пейзаж */
@СМИ
  (максимальная ширина устройства: 1280 пикселей)
  и (ориентация: альбомная) {

}

/ * ----------- Galaxy Tab S ----------- * /

/ * Портрет и пейзаж * /
@СМИ
  (минимальная ширина устройства: 800 пикселей)
  и (максимальная ширина устройства: 1280 пикселей)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/ * Портрет * /
@СМИ
  (максимальная ширина устройства: 800 пикселей)
  и (ориентация: портретная)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/* Пейзаж */
@СМИ
  (максимальная ширина устройства: 1280 пикселей)
  и (ориентация: альбомная)
  и (-webkit-min-device-pixel-ratio: 2) {

}  

  / * ----------- Nexus 7 ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 601 пикселей)
  и (высота устройства: 906 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.331)
  и (-webkit-max-device-pixel-ratio: 1.332) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 601 пикселей)
  и (высота устройства: 906 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.331)
  и (-webkit-max-device-pixel-ratio: 1.332)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 601 пикселей)
  и (высота устройства: 906 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.331)
  и (-webkit-max-device-pixel-ratio: 1.332)
  и (ориентация: альбомная) {

}

/ * ----------- Nexus 9 ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 1536 пикселей)
  и (высота устройства: 2048 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.331)
  и (-webkit-max-device-pixel-ratio: 1.332) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 1536 пикселей)
  и (высота устройства: 2048 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.331)
  и (-webkit-max-device-pixel-ratio: 1.332)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 1536 пикселей)
  и (высота устройства: 2048 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.331)
  и (-webkit-max-device-pixel-ratio: 1.332)
  и (ориентация: альбомная) {

}  

  / * ----------- Kindle Fire HD 7 "----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 800 пикселей)
  и (максимальная ширина устройства: 1280 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.5) {

}

/ * Портрет * /
только экран @media
  и (минимальная ширина устройства: 800 пикселей)
  и (максимальная ширина устройства: 1280 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.5)
  и (ориентация: портретная) {
}

/* Пейзаж */
только экран @media
  и (минимальная ширина устройства: 800 пикселей)
  и (максимальная ширина устройства: 1280 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.5)
  и (ориентация: альбомная) {

}

/ * ----------- Kindle Fire HD 8.9 "----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 1200 пикселей)
  и (максимальная ширина устройства: 1600 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.5) {

}

/ * Портрет * /
только экран @media
  и (минимальная ширина устройства: 1200 пикселей)
  и (максимальная ширина устройства: 1600 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.5)
  и (ориентация: портретная) {
}

/* Пейзаж */
только экран @media
  и (минимальная ширина устройства: 1200 пикселей)
  и (максимальная ширина устройства: 1600 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.5)
  и (ориентация: альбомная) {

}  

Платформа приложений

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

Носимые устройства

  / * ----------- Часы Moto 360 ----------- * /
@СМИ
  (максимальная ширина устройства: 218 пикселей)
  and (max-device-height: 281px) {

}  

css — Медиа-запросы: как настроить таргетинг на настольные компьютеры, планшеты и мобильные устройства?

ИМО это лучшие точки останова:

  @media (min-width: 320px) {/ * смартфоны, iPhone в вертикальной ориентации, телефоны 480x320 в вертикальной ориентации (Android) * /}
@media (min-width: 480 пикселей) {/ * смартфоны, телефоны Android, iPhone с горизонтальной ориентацией * /}
@media (min-width: 600 пикселей) {/ * портретные планшеты, портретные iPad, электронные книги (Nook / Kindle), телефоны с горизонтальной ориентацией 800 x 480 (Android) * /}
@media (min-width: 801px) {/ * планшет, iPad с горизонтальной ориентацией, ноутбуки с низким разрешением и настольные компьютеры * /}
@media (min-width: 1025px) {/ * большие планшеты, ноутбуки и настольные компьютеры с горизонтальной ориентацией * /}
@media (min-width: 1281px) {/ * ноутбуки и настольные компьютеры с высоким разрешением * /}
  

Edit : Улучшено для лучшей работы с 960 сетками:

  @media (min-width: 320px) {/ * смартфоны, iPhone, телефоны с вертикальной ориентацией 480x320 * /}
@media (min-width: 481px) {/ * книжные электронные книги (Nook / Kindle), планшеты меньшего размера с шириной 600 или 640 пикселей.* /}
@media (min-width: 641px) {/ * планшеты с портретной ориентацией, iPad с книжной ориентацией, электронные книги с альбомной ориентацией, телефоны с горизонтальной ориентацией 800 x 480 или 854 x 480 * /}
@media (min-width: 961px) {/ * планшет, iPad с горизонтальной ориентацией, ноутбуки с низким разрешением и настольные компьютеры * /}
@media (min-width: 1025px) {/ * большие планшеты, ноутбуки и настольные компьютеры с горизонтальной ориентацией * /}
@media (min-width: 1281px) {/ * ноутбуки и настольные компьютеры с высоким разрешением * /}
  

На практике многие дизайнеры конвертируют пиксели в em s, в основном потому, что em s обеспечивают лучшее масштабирование.При стандартном масштабировании 1em === 16px , умножьте пиксели на 1em / 16px , чтобы получить em s. Например, 320px === 20em .

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

Независимо от того, предпочитаете ли вы min - , max - или их комбинации, помните о порядке ваших правил, помня, что если несколько правил соответствуют одному и тому же элементу, более поздние правила переопределят более ранние правила.

CSS Media Query для всех мобильных устройств

счастлив, что вы выбрали изучение веб-разработки.

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

  @media (min-width: 320 пикселей) {}
@media (минимальная ширина: 768 пикселей) {}
@media (минимальная ширина: 1024 пикселя) {}
@media (минимальная ширина: 1220 пикселей) {}
@media (минимальная ширина: 1440 пикселей) {}
  

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

  @media (min-width: 320px) {} // для общих стилей (как для мобильных, так и для настольных компьютеров)
@media (max-width: 767px) {} // только для стилей от 320 до 768 пикселей (большинство мобильных устройств)
@media (min-width: 768px) {} // общие стили рабочего стола и планшетов при необходимости
@media (min-width: 768px) и (max-width: 1024px) {} // только стили планшета
@media (min-width: 1025px) // начнем со стиля рабочего стола
  

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

  Все мобильные стили прикреплены только между 320 и 1024 пикселей

@media (min-width: 320px) и (max-width: 1024px) {
  .nav {фон: красный; }
}

Все стили рабочего стола прикреплены только после 1025px
@media (min-width: 1025 пикселей) {
  .nav {фон: зеленый; }
}
  

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

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

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

— как кодировать медиа-запросы CSS для ВСЕХ мобильных устройств и планшетов?

Редактировать Примечание: Это специально метод, который работал со старыми браузерами. Принятый ответ был обновлен до более современного CSS, в котором есть медиа-запросы, которые упрощают эту задачу. В основном я предлагаю использовать свой старый код для CSS, характерный для старых браузеров.

Вместо того, чтобы изначально использовать определенную ширину, или возиться с ориентацией, или другой бессмыслиц, я предлагаю использовать следующий тег мультимедиа …

  @media only screen и (минимальное разрешение: 117 точек на дюйм) и (максимальное разрешение: 119 точек на дюйм), только экран и (минимальное разрешение: 131 точек на дюйм) и (максимальное разрешение: 133 точек на дюйм), только экран и (минимальное разрешение: 145 точек на дюйм) и (максимальное разрешение: 154 точек на дюйм), только экран и (минимальное разрешение: 162 точек на дюйм) и (максимальное разрешение: 164 точек на дюйм), только экран и (минимальное разрешение: 169 точек на дюйм) {
  / * Здесь находится ваш CSS-код для сенсорного ввода * /
}
@media only screen и (минимальное разрешение: 165 точек на дюйм) и (максимальное разрешение: 168 точек на дюйм), только экран и (минимальное разрешение: 155 точек на дюйм) и (максимальное разрешение: 160 точек на дюйм), только экран и (минимальное разрешение: 134 точек на дюйм) и (максимальное разрешение: 144 точек на дюйм), только экран и (минимальное разрешение: 120 точек на дюйм) и (максимальное разрешение: 130 точек на дюйм), только экран и (максимальное разрешение: 116 точек на дюйм) {
  / * Здесь находится ваш CSS-код для конкретного клика * /
}
  

А вы для чего эти теги используете? Для настройки событий наведения и нажатия и касания.

Сенсорные устройства, за исключением нескольких устройств, выделенных серым цветом выше, имеют разрешение, сильно отличающееся от разрешения настольных устройств. Делайте это не для установки элементов дизайна, а для элементов навигации. Некоторые ребята могут кричать, что какое-то безумие с максимальной шириной может быть лучше, но существует так много телефонов HD, что это смешно, что device-max-width быстро становится бесполезным.

Однако должен использовать запросы ширины медиа-ширины. Однако не беспокойтесь о max-device-width, только max-width и min-width.Позвольте указанным выше тегам адресовать ваше прикосновение, а не касаться пользователей, позвольте минимальной и максимальной ширине адресов в зависимости от размера окна и настройте визуальные эффекты .

Кроме того, использование ориентации для определения того, является ли он мобильным или нет, просто глупо, поскольку даже мониторы можно размещать в различных ориентациях (обычная установка, которую я видел для трех мониторов, — это центральный монитор портретной ориентации и боковые мониторы с горизонтальной ориентацией)

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

Итак, у вас должно получиться что-то вроде этого …

  @media only screen и (минимальное разрешение: 117 точек на дюйм) и (максимальное разрешение: 119 точек на дюйм), только экран и (минимальное разрешение: 131 точек на дюйм) и (максимальное разрешение: 133 точек на дюйм), только экран и (минимальное разрешение: 145 точек на дюйм) и (максимальное разрешение: 154 точек на дюйм), только экран и (минимальное разрешение: 162 точек на дюйм) и (максимальное разрешение: 164 точек на дюйм), только экран и (минимальное разрешение: 169 точек на дюйм) {
    #touch_logo {
       дисплей: наследовать;
    }
    #mouse_logo {
       дисплей: нет;
    }
  / * Здесь находится ваш CSS-код для сенсорного ввода * /
}
@media only screen и (минимальное разрешение: 165 точек на дюйм) и (максимальное разрешение: 168 точек на дюйм), только экран и (минимальное разрешение: 155 точек на дюйм) и (максимальное разрешение: 160 точек на дюйм), только экран и (минимальное разрешение: 134 точек на дюйм) и (максимальное разрешение: 144 точек на дюйм), только экран и (минимальное разрешение: 120 точек на дюйм) и (максимальное разрешение: 130 точек на дюйм), только экран и (максимальное разрешение: 116 точек на дюйм) {
    #touch_logo {
       дисплей: нет;
    }
    #mouse_logo {
       дисплей: наследовать;
    }
  / * Здесь находится ваш CSS-код для конкретного клика * /
}
@media (min-width: 541px) {
  / * Здесь можно найти большой вид.* /
}
@media (max-width: 540px) и (min-width: 400px) {
  / * Здесь размещаются мелкие элементы просмотра. * /
}
@media (max-width: 399 пикселей) {
  / * Здесь можно найти материалы для действительно маленьких представлений. * /
}
  

Хотя, не забудьте включить в шапку страницы следующее:

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

Использование медиа-запросов — CSS: каскадные таблицы стилей

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

Медиа-запросы используются для следующего:

Примечание: Примеры на этой странице используют CSS @media в иллюстративных целях, но основной синтаксис остается одинаковым для всех типов медиа-запросов.

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

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

Примечание: Таблица стилей с медиа-запросом, прикрепленным к ее тегу , все равно будет загружаться, даже если запрос вернет false. Тем не менее, его содержимое не будет применяться до тех пор, пока результат запроса не изменится на true.

Типы носителей

Типы носителей описывают общую категорию устройства. За исключением случаев, когда используется , а не или , только логические операторы , тип носителя является необязательным, и подразумевается тип все .

все

Подходит для всех устройств.

печать

Предназначен для постраничных материалов и документов, просматриваемых на экране в режиме предварительного просмотра. (Информацию о проблемах форматирования, характерных для этих форматов, см. На страничном носителе.)

экран

Предназначен в первую очередь для экранов.

речь

Предназначен для синтезаторов речи.

Функции мультимедиа

Функции мультимедиа описывают конкретные характеристики пользовательского агента, устройства вывода или среды. Выражения медиа-функций проверяют их наличие или ценность и являются совершенно необязательными. Каждое выражение медиа-функции должно быть заключено в круглые скобки.

Логические операторы

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

Операторы и используются для объединения нескольких медиа-функций в один медиа-запрос, требуя, чтобы каждая связанная функция возвращала истину, чтобы запрос был истинным. Он также используется для объединения функций мультимедиа с типами мультимедиа.

Оператор not используется для отрицания медиа-запроса, возвращая истину, если в противном случае запрос вернул бы ложь.Если он присутствует в списке запросов, разделенных запятыми, он будет отрицать только конкретный запрос, к которому он применяется. Если вы используете оператор , а не , также должен указать тип носителя.

Примечание: На уровне 3 ключевое слово , а не нельзя использовать для отрицания отдельного выражения мультимедийной функции, только для всего мультимедийного запроса.

только

Оператор only используется для применения стиля, только если весь запрос соответствует, и полезен для предотвращения применения выбранных стилей в старых браузерах.Если не использовать только , старые браузеры будут интерпретировать экран запроса и (max-width: 500px) как экран , игнорируя оставшуюся часть запроса и применяя его стили на всех экранах. Если вы используете оператор only , также должен указать тип носителя.

Запятые используются для объединения нескольких медиа-запросов в одно правило. Каждый запрос в списке, разделенном запятыми, обрабатывается отдельно от других.Таким образом, если какой-либо из запросов в списке верен, весь оператор мультимедиа возвращает истину. Другими словами, списки ведут себя как логические операторы или .

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

Вы также можете настроить таргетинг на несколько устройств. Например, это правило @media использует два медиа-запроса для таргетинга как на экран, так и на устройства печати:

  @media screen, print {...}  

Список всех типов носителей см. В разделе «Типы носителей». Поскольку они описывают устройства очень широко, доступны лишь некоторые из них; для нацеливания на более конкретные атрибуты используйте вместо этого медиа-функции .

Функции мультимедиа описывают конкретные характеристики данного пользовательского агента, устройства вывода или среды. Например, вы можете применить определенные стили к широкоэкранным мониторам, компьютерам, использующим мыши, или устройствам, которые используются в условиях низкой освещенности.В этом примере применяются стили, когда основной механизм ввода пользователя (например, мышь) может наводить курсор на элементы:

  @media (hover: hover) {...}  

Многие медиа-функции — это , диапазон , что означает, что они могут иметь префикс «min-» или «max-» для выражения ограничений «минимального условия» или «максимального условия». Например, этот CSS будет применять стили только в том случае, если ширина области просмотра вашего браузера равна или меньше 12450 пикселей:

  @media (max-width: 12450px) {...}  

Если вы создаете запрос мультимедийной функции без указания значения, вложенные стили будут использоваться до тех пор, пока значение функции не равно нулю (или нет на уровне 4). Например, этот CSS будет применяться к любому устройству с цветным экраном:

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

  @media speech and (соотношение сторон: 11/5) {...}  

Дополнительные примеры мультимедийных функций см. На справочной странице для каждой конкретной функции.

Иногда может потребоваться создать медиа-запрос, который зависит от нескольких условий. Здесь присутствуют логические операторы : , а не , и , а - только . Кроме того, вы можете объединить несколько медиа-запросов в список , разделенный запятыми ; это позволяет применять одни и те же стили в разных ситуациях.

В предыдущем примере мы уже видели операторы и , используемые для группировки носителя типа с функцией носителя .Оператор и также может объединить несколько мультимедийных функций в один мультимедийный запрос. Оператор , а не , тем временем, отрицает медиа-запрос, в основном меняя его обычное значение. Оператор only не позволяет более старым браузерам применять стили.

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

Объединение нескольких типов или функций

Ключевое слово и объединяет функцию мультимедиа с типом носителя или другими функциями мультимедиа. В этом примере объединены две мультимедийные функции, чтобы ограничить стили для устройств с альбомной ориентацией и шириной не менее 30 ems:

  @media (min-width: 30em) и (ориентация: альбомная) {...}  

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

  @media screen и (min-width: 30em) и (ориентация: альбомная) {...}  

Тестирование для нескольких запросов

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

  @media (min-height: 680px), экран и (ориентация: книжная) {...}  

В приведенном выше примере, если у пользователя есть принтер с высотой страницы 800 пикселей, оператор мультимедиа вернет истину, потому что будет применяться первый запрос.Точно так же, если бы пользователь находился на смартфоне в портретном режиме с высотой области просмотра 480 пикселей, будет применяться второй запрос, и оператор мультимедиа все равно вернет истину.

Инвертирование значения запроса

Ключевое слово , а не инвертирует значение всего медиа-запроса. Он только аннулирует конкретный медиа-запрос, к которому он применяется. (Таким образом, это не будет применяться к каждому медиа-запросу в списке медиа-запросов, разделенных запятыми.) Ключевое слово , а не не может использоваться для отрицания отдельного запроса функции, только всего медиа-запроса., а не , оценивается последним в следующем запросе:

  @media not all and (монохромный) {...}
  

… так что вышеупомянутый запрос оценивается так:

  @media not (all and (монохромный)) {...}
  

… а не так:

  @media (не все) и (монохромный) {...}  

В качестве другого примера приведем следующий медиа-запрос:

  @media not screen and (color), print and (color) {...}
  

… оценивается так:

  @media (not (screen and (color))), print and (color) {...}  

Улучшение совместимости со старыми браузерами

Ключевое слово only предотвращает использование старых браузеров, не поддерживающих медиа-запросы, с мультимедийные функции от применения заданных стилей. Не влияет на современные браузеры.

  @media only screen and (color) {...}
  

Спецификация Media Queries Level 4 включает некоторые улучшения синтаксиса, чтобы сделать медиа-запросы с использованием функций, которые имеют тип «диапазон», например ширину или высоту, менее подробными.Уровень 4 добавляет контекст диапазона для написания таких запросов. Например, используя функциональность max- для ширины, мы можем написать следующее:

Примечание: Спецификация Media Queries Level 4 имеет разумную поддержку в современных браузерах, но некоторые мультимедийные функции не поддерживаются должным образом. См. Более подробную информацию в таблице совместимости браузеров @media .

  @media (макс. Ширина: 30 мкм) {...}  

В Media Queries Level 4 это можно записать как:

  @media (ширина <= 30em) {...}  

Используя min- и max- , мы можем проверить ширину между двумя значениями, например:

  @media (min-width: 30em) и (max-width: 50em) {...}  

Это преобразовало бы в синтаксис уровня 4 как:

  @media (30em <= width <= 50em) {...}
  

Media Queries Level 4 также добавляет способы объединения медиа-запросов с использованием полной логической алгебры с и , не и или .

Отрицание признака с

  @media (not (hover)) {.