scss-media-queries-system v1.0.3

Media Queries Breakpoints

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

Способом разработки адаптивной верстки был выбран 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

Android Products