Media Queries Breakpoints

На сайтах используется 6 типов media breakpoints, которые служат для стилизации сайта под различные типы девайсов - xs, sm, xm, md, lg и xl.

| Device | Code | Type | Range | | ------------- |----- | ---------------------- | --------------| | Extra small | xs | Extra small mobile | 319.98px > | | Small | sm | Small mobile | 567.98px > | | Extra Medium| xm | Extra Medium tablets | 767.98px > | | Medium | md | Medium tablets | 1023.98px > | | Large | lg | Large desktop | 1365.98px > | | Extra large | xl | 4k and ultra-wide | 1679.98px > |

Способом разработки адаптивной верстки был выбран mobile-first.

Данный вариант медиа запросов является частью моей версии Flexbox сетки. Без этого файла адаптивные стили сетки не будут работать.

Навигация по документации сетки.

• Установка
  • Подключение Nuxt.js
• Популярные разрешения экранов
  • Apple Products
  • Android Products

Установка

  npm i scss-media-queries-system -D

Подключение Nuxt.js

Для начала необходимо установить модуль Nuxt Style Resources для работы с SCSS. Затем в файле nuxt.config.js подключить SCSS файл со стилями сетки:

  styleResources: {
    scss: [
      '@/node_modules/scss-media-queries-system/media-queries.scss',
    ],
  },

Важно, при подключении моей Flexbox сетки в Nuxt.js, первым должен быть подключен файл с медиа запросами, после файл со стилями сетки. Это необходимо для того, чтобы миксины из медиа запросов корректно работали в стилях сетки.

Популярные разрешения экранов

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

Apple Products

| | Viewport (px) | | ------------------------ |-------------- | | iPhone | | | iPhone 5 | 320 x 568 | | iPhone 6/6S | 375 x 667 | | iPhone 6 Plus/6S Plus | 414 x 736 | | iPhone 7 | 375 x 667 | | iPhone 7 Plus | 414 x 736 | | iPhone 8 | 375 x 667 | | iPhone 8 Plus | 414 x 736 | | iPhone X | 375 x 812 | | iPhone XS Max | 414 x 896 | | iPhone XS | 375 x 812 | | iPhone XR | 414 x 896 | | iPhone 11 | 414 x 896 | | iPhone 11 Pro | 375 x 812 | | iPhone 11 Pro Max | 414 x 896 | | iPhone 12 mini | 375 x 812 | | iPhone 12 | 375 x 812 | | iPhone 12 Pro | 428 x 926 | | iPhone 12 Pro Max | 390 x 844 | | iPod | | | iPod Touch | 320 x 568 | | iPad | | | iPad Pro | 1024 x 1366 | | iPad Air 1 & 2 | 768 x 1024 | | iPad Mini 2 & 3 | 768 x 1024 | | iPad Mini | 768 x 1024 |

Android Products

| | Viewport (px) | | ------------------------- |-------------- | | Phones | | | Nexus 6P | 412 x 732 | | Nexus 5X | 412 x 732 | | Google Pixel | 412 x 732 | | Google Pixel XL | 412 x 732 | | Google Pixel 2 XL | 412 x 732 | | Google Pixel 3 | 412 x 824 | | Google Pixel 3 XL | 412 x 847 | | Google Pixel 3a | 412 x 846 | | Google Pixel 3a XL | 412 x 824 | | Google Pixel 4 | 412 x 869 | | Google Pixel 4 XL | 412 x 869 | | Samsung Galaxy Note 10+ | 412 x 869 | | Samsung Galaxy Note 10 | 412 x 869 | | Samsung Galaxy Note 9 | 360 x 740 | | Samsung Galaxy Note 5 | 480 x 853 | | LG G5 | 480 x 853 | | One Plus 3 | 480 x 853 | | Samsung Galaxy S9+ | 360 x 740 | | Samsung Galaxy S9 | 360 x 740 | | Samsung Galaxy S8+ | 360 x 740 | | Samsung Galaxy S8 | 360 x 740 | | Samsung Galaxy S7 Edge | 360 x 640 | | Samsung Galaxy S7 | 360 x 640 | | Tablets | | | Nexus 9 | 768 x 1024 | | Nexus 7 (2013) | 600 x 960 | | Pixel C | 900 x 1280 | | Samsung Galaxy Tab 10 | 800 x 1280 | | Chromebook Pixel | 1280 x 850 |