Схема адаптации мобильного терминала на основе проекта Vue/React

React.js

предисловие

  • Цель этой статьи — использовать vue или реагировать на разработку мобильных терминалов и H5 с помощью схемы адаптации, описанной ниже, вам не нужно заботиться о размере мобильного устройства, вам нужно только следовать макету значения px в исправлен проект проекта для повышения эффективности разработки.
  • Ниже показан проект реакции (create-react-app), который я создал с помощью create-react-app, и проект vue, созданный с помощью vue-cli 2.x.Доступен профессиональный тестКонфигурация.

px2rem или postcss-px2rem

  • В мобильном терминале для настройки различных устройств обычно используется rem для адаптации.
  • rem адаптируется через корневой элемент, а корневой элемент на веб-странице относится к<html>, мы устанавливаем<html>Размер шрифта может контролировать размер rem (1rem = 1 размер шрифта корневого элемента).
  • Видимый, пока мы устанавливаем корневой элемент в соответствии с разными экранами (используя медиа-запросы css или js)<html>Размер шрифта, другие элементы, которые использовали единицу rem, будут адаптивно отображать соответствующий размер.
  • Эскиз дизайна обычно основан на конкретной модели устройства (например, iphone 6), а стиль определяется в единицах пикселей.Чтобы сделать эскиз дизайна универсальным для разных моделей устройств, существует утомительный процесс расчета и преобразования пикселей в рем. Поэтому требуется более научный способ использования единицы бэр.
  • px2remилиpostcss-px2remПринцип: компилировать px в css до rem, сотрудничать с js для расчета значения dpr в соответствии с различными моделями мобильных телефонов, изменять<meta>значение области просмотра и настройка<html>размер шрифта.

использовать в проекте

конфигурация проекта recat postcss-px2rem

  • Во-первых, мы используем скаффолдинг create-react-app реакции для инициализации проекта веб-пакета (при условии, что приложение create-react-app установлено, что не будет подробно объяснено).
create-react-app my-app
  • Предоставьте конфигурацию веб-пакета, пакет реактивных скриптов:
yarn eject
  • использоватьyarnПосле установки зависимостей, требуемых проектом, установитеlib-flexible,postcss-px2remа такжеpostcss-loader:
yarn add postcss-px2rem lib-flexible 
yarn add postcss-loader --dev
  • Установить на странице входа index.html<meta>Этикетка:
<meta name="viewport" content="width=device-width,inital-scale=1.0,
    maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  • Затем импортируйте его в файл записи проекта index.js.lib-flexible:
import 'lib-flexible';
  • Затем импортируйте webpack.config.js в каталог конфигурации проекта.postcss-px2rem:
const px2rem = require('postcss-px2rem')
  • Тем временем в webpack.config.jspostcss-loaderДобавьте в загрузчик:
{
        loader: require.resolve('postcss-loader'),
        options: {
          /* 省略代码... */
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
            px2rem({remUnit: 37.5}), // 添加的内容
            /* 省略代码... */
          ],
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      },
  • Наконец, используйтеyarn startПерезапустите проект, вы найдетеpostcss-px2remКонфигурация завершена.

конфигурация проекта vue px2rem

  • Во-первых, мы используем скаффолдинг vue-cli для инициализации проекта веб-пакета (при условии, что vue-cli установлен, что не будет подробно объясняться), а некоторые опции выбираются в соответствии с потребностями вашего собственного проекта.
vue init webpack my-app
  • После выполнения команды в текущем каталоге будет создана папка проекта с именем «my-app». Войдите в каталог проекта:
cd my-app
  • использоватьyarnПосле установки зависимостей, требуемых проектом, установитеlib-flexibleа такжеpx2rem-loader:
yarn add lib-flexible
yarn add px2rem-loader --dev
  • Установить на странице входа index.html<meta>Этикетка:
<meta name="viewport" content="width=device-width,inital-scale=1.0,
    maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  • Затем импортируйте его в файл входа в проект main.js.lib-flexible:
import 'lib-flexible/flexible.js';
  • При этом в utils.js в каталоге сборки проекта поместитеpx2rem-loaderДобавлено в cssLoaders. нашел поискомgenerateLoadersметод, добавьте сюда:
exports.cssLoaders = function (options) {
  /* 省略代码块 */

  const cssLoader = {
    /* 省略代码块 */
  }

  /* 添加的代码块 */
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 37.5 // 基准大小 baseSize，设计稿宽度/10
    }
  }
  /* 添加的代码块 */
  
  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    const loaders = [cssLoader, px2remLoader] // 添加px2remLoader
    if (loader) {
      /* 省略代码块 */
    }

    /* 省略代码块 */
}
  • Наконец, используйтеyarn devПерезапустите проект, и вы обнаружите, что установленные вами px были преобразованы в rem.结果

Применимо и не применимо

  • Вышеупомянутое преобразование реализации работает для:

    (1) Написано в компоненте vue<style></style>css ниже.

    (2) Переход из index.js проекта реагирования или main.js проекта vueimport ‘../../static/css/reset.css’Импорт CSS.

    (3) В компоненте vue<script type=”text/ecmascript-6″>import ‘../../static/css/reset.css'</script>Внедрить css.

  • Другие случаи не применяются:

    (1) В компоненте vue<style></style>прошедший@import “../../static/css/reset.css(Его можно представить в виде (2) и (3) выше.)

    (2) Внешний стиль:<link rel=”stylesheet” href=”static/css/reset.css”>.

    (3) Внутренний стиль элемента:style="height: 417px; width: 550px;".

Категории