Romych: /* См. также */

2020-10-30T12:58:40Z

См. также

Нова сторінка

== CSS шаблон Media Query для основных типов устройств ==

<source lang="scss">
// Media

// Portrait — телефоны и планшеты вертикально

@media (orientation: portrait) {

// Телефоны — до 576px по ширине

@include media-breakpoint-down(xs) { /* То же, что (max-width: 575.98px) */ }
@media (max-width: 575.98px) {
@media (min-width: 320px) {
@media (min-height: 480px) { /* iPhone 4 */ }
@media (min-height: 533px) { /* Galaxy S */ }
@media (min-height: 568px) { /* iPhone 5 */ }
}
@media (min-width: 360px) {
@media (min-height: 640px) { /* Galaxy S5/S7, Nexus 5, Moto G4, Microsoft Lumia 950, Galaxy Note 3/II/S III, BlackBerry Z30 */ }
@media (min-height: 720px) { /* Galaxy A6s */ }
@media (min-height: 740px) { /* Galaxy S8/S9 */ }
@media (min-height: 760px) { /* Galaxy S10 */ }
@media (min-height: 780px) { /* Moto G8 */ }
@media (min-height: 800px) { /* Galaxy S20 */ }
}
@media (min-width: 375px) {
@media (min-height: 667px) { /* iPhone 6/7/8 */ }
@media (min-height: 812px) { /* iPhone X/XS/11 Pro */ }
}
@media (min-width: 384px) { /* Nexus 4 */ }
@media (min-width: 393px) {
@media (min-height: 786px) { /* Redmi Note 5 */ }
@media (min-height: 816px) { /* Mi 6/8 SE */ }
@media (min-height: 851px) { /* Mi 9/10, Redmi Note 7/8/9 */ }
}
@media (min-width: 411px) {
@media (min-height: 660px) { /* Nexus 5X */ }
@media (min-height: 731px) { /* Nexus 6, Pixel XL/2 */ }
@media (min-height: 823px) { /* Pixel 2 XL */ }
@media (min-height: 846px) { /* Galaxy S8/S9 Plus */ }
@media (min-height: 869px) { /* Galaxy Note10/S10 Plus */ }
@media (min-height: 892px) { /* Galaxy A30/A50 */ }
}
@media (min-width: 414px) {
@media (min-height: 736px) { /* iPhone 6/7/8 Plus */ }
@media (min-height: 896px) { /* iPhone 11/XR/XS Max */ }
}
@media (min-width: 450px) {
@media (min-height: 600px) { /* Surface Duo */ }
@media (min-height: 854px) { /* Nokia N9 */ }
}
}

// Планшеты — от 576px по ширине

@include media-breakpoint-up(sm) { /* То же, что (min-width: 576px) */ }
@media (min-width: 576px) {
@media (min-height: 960px) { /* Nexus 7 */ }
@media (min-height: 1024px) { /* Amazon Fire HD 8 */ }
}
@include media-breakpoint-up(md) { /* То же, что (min-width: 768px) */ }
@media (min-width: 768px) { /* iPad */ }
@media (min-width: 800px) { /* Nexus 10, Android 7″-10″ */ }
@media (min-width: 834px) {
@media (min-height: 1112px) { /* iPad Pro 10.5″ */ }
@media (min-height: 1194px) { /* iPad Pro 11″ */ }
}
@media (min-width: 1024px) { /* iPad Pro 12.9″ */ }
}

// Landscape — ноутбуки, мониторы и горизонтальные телефоны и планшеты

@media (orientation: landscape) {

// Сетка Bootstrap

@include media-breakpoint-up(sm) { /* @media (min-width: 576px) — Телефоны горизонтально — от Nexus 5 до Galaxy S10 */ }
@include media-breakpoint-up(md) { /* @media (min-width: 768px) — Телефоны горизонтально — от Moto G8 до максимального — iPhone 11 */ }
@include media-breakpoint-up(lg) { /* @media (min-width: 992px) — Планшеты горизонтально — от iPad до iPad Pro 11″ и минимальный десктоп 1024 px — старые 15″ мониторы */ }
@include media-breakpoint-up(xl) { /* @media (min-width: 1200px) — Все остальные современные десктопы: */ }
/* — планшеты горизонтально — iPad Pro 12.9″, Nexus 10, Kindle Fire HDX, Android 7″-10″ */
/* — все ноутбуки, начиная с Laptop with MDPI screen, MacBook 12″ (2015-2017), MacBook Pro 13″ (2014-2018), MacBook Air 13″ (2018) */

// На десктопах критична высота, поэтому подстраиваемся под неё

@media (min-height: 520px) { /* примерно 575px — 1280x720 — 3% */ }
@media (min-height: 600px) { /* примерно 623px — 1366x768 — 14% — 2-е место по распространенности: бюджетные 18,5″ мониторы и 15″ ноутбуки, старые (2014-2015) MacBook Air 11″ */ }
@media (min-height: 650px) { /* примерно 655px — 1280x800 — 2% — Laptop with MDPI screen, MacBook 12″ (2015-2017), MacBook Pro 13″ (2014-2018), MacBook Air 13″ (2018) */ }
@media (min-height: 680px) { /* примерно 685px — 1536x864 — 6% — Ноутбуки 13″-15″ с разрешением Full HD 1920x1080 и настройкой в Windows 125% увеличения. */ }
/* Это не настоящее разрешение, а масштабированное, поэтому размеры элементов интерфейса больше, а Viewport меньше. */
@media (min-height: 750px) { /* примерно 755px — 1440x900 — 4% — Laptop with HiDPI screen, MacBook Pro 15″ (2014-2018), MacBook Air 13″ (2014-2017), старые 19″ мониторы */ }
/* ~~~~~~~~~~~~~~ — 1600x900 — 3% — 3-е место по популярности среди современных ноутбуков */
@media (min-height: 800px) { /* примерно 815px — 1536x960 — 0,07% — MacBook Pro 16″ 2019 */ }
@media (min-height: 870px) { /* примерно 879px — 1280x1024 — 2% */ }
@media (min-height: 900px) { /* примерно 905px — 1680x1050 — 3% */ }
@media (min-height: 930px) { /* примерно 935px — 1920x1080 — 18% — Full HD — большинство современных мониторов (21,5″-27″) и ноутбуков (13″-17″) */ }
@media (min-height: 1050px) { /* примерно 1055px — 1920x1200 — 1% — Мониторы 24″-25″ */ }
}
</source>

== См. также ==

* [[Размеры разрешений экранов]]
* [https://docs.google.com/spreadsheets/d/1kZ877-GMR-EWVzd97ITfL9tjniziy9IdQt2AUGZOzmk/edit#gid=462480101&fvid=1426812764 Responsive Design Testing Table]
* [[Сниппеты_Tailwind#Breakpoints]]
* [[Сниппеты_Bootstrap#Media_queries]]

Media Query шаблон - Історія редагувань

Romych: /* См. также */