Адаптация на основе Vue для мобильных устройств и ПК

Vue.js

нужно

Для разработки платформы требуется хороший опыт работы как на ПК, так и на мобильных устройствах.

идеи

Для достижения одновременной адаптации мобильного терминала и ПК-терминала обычно существуют две основные идеи:

  1. Набор ресурсов, выберите для загрузки разные css в зависимости от того, является ли это мобильным устройством или нет.
  2. Два набора ресурсов, один для ПК и один для мобильных устройств, поддерживаются отдельно и входят в разные маршруты на входе.

Разница между двумя методами заключается в том, что первый уровень стиля делится на компьютерный и мобильный, а второй — страница делится на компьютерный и мобильный.


Характерными чертами двух подходов являются:
1. Первый подходит для проектов с небольшим количеством различий в взаимодействии и макете на обоих концах, так и на относительно простое взаимодействие. Существует только один набор ресурсов, количество кода невелика, а обслуживание относительно простое.
2. Последнее относится к двум интерактивному режиму и разнице макета, высокие требования к дизайну, высокие требования к расширению. Два ресурса, большое количество кода, сложные, но оба конца не взаимодействуют, нет необходимости рассматривать слишком много.

решение

план ресурсов

Потому что текущий проект требует быстрой разработки и быстрой реализации, и расположение эскизов дизайна на обоих концах мало чем отличается. Итак, первый способ был принят. Реализация выглядит следующим образом:

шаг

1. Определить тип оконечного оборудования.

Настроено в main.js для определения типа терминального устройства перед загрузкой страницы.

navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)

2. Разделите два набора файлов css.

ПК использует px в качестве единицы измерения, мобильный использует комбинацию rem и vw, а в файле css для мобильных устройств задайте размер шрифта проекта, например, когда проект дизайна составляет 375 пикселей,html {font-size: calc(100vw/37.5)}В настоящее время, когда видимый размер окна мобильного устройства составляет 375 пикселей, размер шрифта html составляет 10 пикселей, поэтому 1rem = 10 пикселей.

Структура стилей следующая: разделите css на два набора для ПК и мобильных устройств, и у каждого разработчика будет два своих набора файлов css.

image.png

// mobile.scss
@import './mobile/hm-mobile.scss';
@import './mobile/tf-mobile.scss';

.no-mobile {
  display: none;
}
html {
  font-size: calc(100vw/37.5);
}


// pc.scss
@import './pc/hm-pc.scss';
@import './pc/tf-pc.scss';
.no-pc {
  display: none;
}

3. Загрузите два набора файлов css

Судя по типу терминала, загрузите разные файлы css,

// main.js配置
import { _isMobile } from '@/utils/utils';
...
...
...
if (_isMobile()) {
  require('./styles/mobile.scss');
  console.log('mobile');
} else {
  console.log('pc');
  require('./styles/pc.scss');
}

Следует отметить, что все стили записываются в глобальный файл стилей.Когда несколько человек разрабатывают совместно, необходимо подчеркнуть соглашение об именах, чтобы предотвратить загрязнение имен.Вы можете обратиться к**Соглашение об именах БЭМ**

Почему бы не использовать медиа-запросы и не полагаться на набор CSS для обработки как ПК, так и мобильных устройств?Автор считает, что один и тот же набор CSS сделает связь слишком высокой, ее будет сложно поддерживать на обоих концах на более позднем этапе, а стоимость увеличится, если проекты на обоих концах будут разделены. Таким образом, в предпосылке двух наборов CSS адаптивная реализация может быть реализована с одной стороны.Например, отзывчивость больших, средних и маленьких экранов может быть сделана для ПК, а не отзывчивость, которая охватывает непосредственно от ПК на мобильную сторону.

Два плана ресурсов

Основываясь на идее двух наборов ресурсов, способов достижения этого на самом деле много.

  1. от пользователей сети(Конфигурация разделена на обоих концах)
  2. Набор решений, которые я использовал в своих собственных проектах в эти дни:


Ядро проходит черезДва набора ресурсов + оценка типа клиента + защита маршрутизациинепрерывный

шаг

1. Спецификации для ограничения маршрутизации (основа для защиты маршрутизации)

  • Установите для атрибута type метаданных значение pc или mobile, а также укажите путь: pc начинается с p_, а mobile начинается с m_.
    image.png
  • Корневой маршрут принимает перемещение и указывает на маршрут мобильного терминала и ПК-терминала соответственно.Конкретный маршрут определяется типом терминала.
    image.png

    image.png
  • Загрузка по требованию.

2. Маршрутная охрана

Перенаправленная страница перехватывается типом мета, чтобы предотвратить перекрестный доступ, вызванный прямым вводом URL-адреса.Когда выполняется перекрестный доступ, он вынужден перехватывать и переходить на ту же страницу, принадлежащую локальному типу. Например, при доступе к p_index с мобильного телефона происходит переход к m_index, поэтому должна быть установлена ​​не только мета, но и маршрутизация страниц на обоих концах должна иметь определенные правила. Вы можете сделать это здесь или нет, вы можете просто перехватить и перейти на домашнюю страницу этого конца.

image.png

3. Динамически добавлять метаданные веб-страницы и использовать сторонние плагины по типу терминала.

// main.js
if (/Android|webOS|iPhone|iPod|BlackBerry|iPad/i.test(navigator.userAgent)) {
  Vue.use(VueTouch, { name: 'v-touch' });
  VueTouch.config.swipe = {
    threshold: 50
  };
  var oMeta = document.createElement('meta');
  oMeta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=0';
  oMeta.name = 'viewport';
  document.getElementsByTagName('head')[0].appendChild(oMeta);
}

4. postcss-pxtorem исключает влияние

В связи с потребностями проекта и на ПК, и на мобильных устройствах используется разработка rem, и оба используют плагин px to rem, но база конверсии px в rem разная на обоих концах, и необходимо исключить взаимное влияние обоих концов.

//vue.config.js
const config = {
  // ...
  css: {
    extract: true,
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 192,
            exclude: /node_modules\/vant|mobile/i, // 排除mobile和vant库
            propList: ['*'],
            selectorBlackList: ['.van-'] // 排除移动端使用了vant库
          }),
          require('postcss-pxtorem')({
            rootValue: 37.5,
            exclude: 'pc', // 排除pc
            propList: ['*']
          })
        ]
      }
    }
  }
};

module.exports = config;
Категории