мобильные решения vue end идеально подходят, не упоминайте об этом

PostCSS
мобильные решения vue end идеально подходят, не упоминайте об этом

Предисловие: Согласно недавнему проекту медицинского мобильного телефона, как vue адаптируется к разным размерам экрана мобильного терминала?

1. Схема адаптации

Мобильное решение vue, которое я использовал в этом проекте, представляет собой комбинацию amfe-flexible и postcss-pxtorem).

Сначала введите amfe-flexible

amfe-flexible — настроить масштабируемую схему макета, в основном установив для 1rem значение viewWidth/10.

Тогда есть эта библиотека postcss-pxtorem

postcss-pxtorem — это плагин для postcss, который преобразует пиксельные единицы в единицы rem.

2. Как пользоваться и настраивать?

1. Установите amfe-flexible и postcss-pxtorem

​
npm install amfe-flexible --save
npm i postcss-pxtorem@5.1.1  --save  //这个要装5.1.1版本的

2. После завершения установки его необходимо импортировать, прежде чем его можно будет использовать.

Нам нужно ввести его в main.js, чтобы использовать

import 'amfe-flexible';

можно импортировать

3. Затем идут шаги по настройке postcss-pxtorem

Конфигурация postcss-pxtorem, слева направо можно уменьшить vue.config.js, .postcssrc.js, postcss.config.js при этом одна конфигурация, вес, не новый файл, нужно только установитьодин изТолько что:

Для удобства конфигурация кода, которую я настроил в vue.config.js, выглядит следующим образом:

module.exports = {
    //...其他配置
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue: 37.5,
                        propList: ['*']
                    })
                ]
            }
        }
    },
}
​

Настройте в .postcssrc.js или postcss.config.js следующим образом:

module.exports = {
    "plugins": {
        'postcss-pxtorem': {
            rootValue: 37.5,
            propList: ['*']
        }
    }
}

будь осторожен:

1. Значение rootValue устанавливается в соответствии с шириной проектного чертежа, деленной на 10. Здесь предполагается, что проектный чертеж равен 375, то есть для rootValue установлено значение 37,5;

2. propList для установки свойств, которые нужно конвертировать, здесь * конвертируется для всех.

Благодаря приведенной выше конфигурации мы можем использовать ее в проекте.

Например, в проекте пишем:

.login-form {
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
    .title {
      position: absolute;
      top: -50px;
      font-size: 24px;
      color: #fff;
      left: 0;
      right: 0;
      text-align: center;
    }
  }

Тогда вывод нашего кода выглядит следующим образом, и плагин помогает нам автоматически преобразовать единицу измерения.

login-wraper .login-form {
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    padding: .53333rem; // 注意这个就是转换后的单位
    box-sizing: border-box;
    border-radius: .26667rem;  // 注意这个就是转换后的单位
}

Вышеупомянутое решение для адаптации мобильного телефона Vue. забери спасибо

Категории