scss-media-queries-system

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