7

Медиа-запросы: Как нацелиться на десктоп, планшет и мобильные устройства?

VentoLuna3263 • 01.01.2025 15:02
11

Я проводил некоторое время, изучая медиа-запросы, но всё ещё не понимаю, как правильно задавать целевые размеры для устройств.

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

Вот несколько примеров, которые я нашел:

/* Мобильные устройства */
@media only screen and (min-width: 480px) {}

/* Планшеты */
@media only screen and (min-width: 768px) {}

/* Настольные компьютеры */
@media only screen and (min-width: 992px) {}

/* Огромные экраны */
@media only screen and (min-width: 1280px) {}

Или:

/* Телефоны */
@media only screen and (max-width: 320px) {}

/* Планшеты */
@media only screen and (min-width: 321px) and (max-width: 768px) {}

/* Настольные компьютеры */
@media only screen and (min-width: 769px) {}

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

css mobile media-queries tablet

5 ответ(ов)

10

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

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

Обновление: Уточнено для лучшей совместимости с сеткой 960:

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

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

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

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

Lumivox7456 • 06.01.2025 05:08
0

Вот рекомендуемые брейкпоинты для использования в Twitter Bootstrap, которые помогут вам адаптировать ваш сайт для различных устройств:

/* Пользовательский, iPhone Retina */ 
@media only screen and (min-width: 320px) {
    
}

/* Устройства очень маленького размера, телефоны */ 
@media only screen and (min-width: 480px) {

}

/* Устройства маленького размера, планшеты */
@media only screen and (min-width: 768px) {

}

/* Устройства среднего размера, настольные компьютеры */
@media only screen and (min-width: 992px) {

}

/* Устройства большого размера, широкие экраны */
@media only screen and (min-width: 1200px) {

}

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

Ксеноид • 04.01.2025 06:40 • 04.01.2025 15:40
0

Медиазапросы для общих точек разбиения устройств

/* Смартфоны (портретная и альбомная ориентация) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    /* Стили */
}

/* Смартфоны (альбомная ориентация) ----------- */
@media only screen and (min-width: 321px) {
    /* Стили */
}

/* Смартфоны (портретная ориентация) ----------- */
@media only screen and (max-width: 320px) {
    /* Стили */
}

/* iPad (портретная и альбомная ориентация) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    /* Стили */
}

/* iPad (альбомная ориентация) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    /* Стили */
}

/* iPad (портретная ориентация) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    /* Стили */
}

/**********
iPad 3
**********/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    /* Стили */
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    /* Стили */
}

/* Настольные компьютеры и ноутбуки ----------- */
@media only screen and (min-width: 1224px) {
    /* Стили */
}

/* Большие экраны ----------- */
@media only screen and (min-width: 1824px) {
    /* Стили */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    /* Стили */
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    /* Стили */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
    /* Стили */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
    /* Стили */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
    /* Стили */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
    /* Стили */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
    /* Стили */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
    /* Стили */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
    /* Стили */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
    /* Стили */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
    /* Стили */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
    /* Стили */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
    /* Стили */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
    /* Стили */
}

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

VentoSky74640 • 04.01.2025 07:06
0

В ответ на ваш вопрос, я приведу информацию о различных типах устройств и их характеристиках в соответствии с шириной экрана и коэффициентом пикселей:

  1. Экстра малые устройства (телефоны, до 480px)
  2. Малые устройства (планшеты, от 768px и выше)
  3. Средние устройства (большие планшеты в ландшафтной ориентации, ноутбуки и настольные компьютеры, от 992px и выше)
  4. Большие устройства (большие настольные компьютеры, от 1200px и выше)
  5. Портретные электронные книги (Nook/Kindle) и маленькие планшеты - min-width: 481px
  6. Портретные планшеты, портретный iPad, ландшафтные электронные книги - min-width: 641px
  7. Планшет, ландшафтный iPad, ноутбуки низкого разрешения - min-width: 961px
  8. HTC One: ширина устройства - 360px, высота - 640px, -webkit-device-pixel-ratio: 3
  9. Samsung Galaxy S2: ширина устройства - 320px, высота - 534px, -webkit-device-pixel-ratio: 1.5 (также совместимо с min--moz-device-pixel-ratio: 1.5 и (-o-min-device-pixel-ratio: 3/2))
  10. Samsung Galaxy S3: ширина устройства - 320px, высота - 640px, -webkit-device-pixel-ratio: 2 (поддержка для более старых версий Firefox до 16)
  11. Samsung Galaxy S4: ширина устройства - 320px, высота - 640px, -webkit-device-pixel-ratio: 3
  12. LG Nexus 4: ширина устройства - 384px, высота - 592px, -webkit-device-pixel-ratio: 2
  13. Asus Nexus 7: ширина устройства - 601px, высота - 906px, -webkit-min-device-pixel-ratio: 1.331 и (-webkit-max-device-pixel-ratio: 1.332)
  14. iPad 1 и 2, iPad Mini: ширина устройства - 768px, высота - 1024px, -webkit-device-pixel-ratio: 1
  15. iPad 3 и 4: ширина устройства - 768px, высота - 1024px, -webkit-device-pixel-ratio: 2
  16. iPhone 3G: ширина устройства - 320px, высота - 480px, -webkit-device-pixel-ratio: 1
  17. iPhone 4: ширина устройства - 320px, высота - 480px, -webkit-device-pixel-ratio: 2
  18. iPhone 5: ширина устройства - 320px, высота - 568px, -webkit-device-pixel-ratio: 2

Эти параметры помогут вам лучше понять, как адаптировать ваш веб-дизайн под различные устройства!

WebDsigner4u3705 • 03.01.2025 07:46 • 03.01.2025 17:45
0

Если вы хотите использовать медиа-запросы для стилизации элементов в зависимости от размера экрана, вот простой пример кода на CSS. Этот код определяет стили для разных типов устройств, таких как мобильные телефоны, планшеты и настольные компьютеры.

/* Мобильные устройства */
@media (max-width: 480px) {
    foo > bar {
        /* Ваши стили для мобильных устройств */
    }
}

/* Планшеты низкого разрешения и iPad */
@media (min-width: 481px) and (max-width: 767px) {
    foo > bar {
        /* Ваши стили для планшетов */
    }
}

/* Планшеты и iPad (портретная ориентация) */
@media (min-width: 768px) and (max-width: 1024px) {
    foo > bar {
        /* Ваши стили для планшетов в портретной ориентации */
    }
}

/* Ноутбуки и настольные компьютеры */
@media (min-width: 1025px) and (max-width: 1280px) {
    foo > bar {
        /* Ваши стили для ноутбуков и настольных ПК */
    }
}

/* Большие мониторы */
@media (min-width: 1281px) {
    foo > bar {
        /* Ваши стили для больших мониторов */
    }
}

С помощью этого кода вы сможете адаптировать ваши стили под различные устройства, что поможет улучшить пользовательский опыт. Не забудьте заменить foo и bar на ваши реальные селекторы!

Мирослав Кифан • 02.01.2025 21:28
Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь
Статистика
Задан 01.01.2025
Просмотров 11
Ответов 5
Похожие вопросы
0 ответ(ов) 21 просмотр(ов)

Как задать cellpadding и cellspacing с помощью CSS?

html css html-table +1
0 ответ(ов) 14 просмотр(ов)

Как сделать выпадающее меню Twitter Bootstrap по наведению, а не по клику

css drop-down-menu twitter-bootstrap
0 ответ(ов) 8 просмотр(ов)

Как расположить div внизу своего контейнера?

html css
0 ответ(ов) 16 просмотр(ов)

Как отключить перенос строк в HTML?

html css word-wrap
0 ответ(ов) 7 просмотр(ов)

Установить фиксированную ширину столбца таблицы независимо от количества текста в ячейках?

html css column-width
Популярные метки
javascript ×432 python ×359 java ×181 css ×116 bash ×104 html ×101 string ×98 c++ ×86 jquery ×79 arrays ×79