scss-media-queries-system
v1.0.3
Published
SCSS Media Queries Breakpoints system for mobile-first standard
Readme
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 сетки. Без этого файла адаптивные стили сетки не будут работать.
Навигация по документации сетки.
Установка
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 |