Vue-cli3.0 px преобразуется в rem для полной адаптации h5

Vue.js

Набросок дизайна очень важен для внешнего интерфейса, но единица измерения наброска дизайна — px, а единица адаптации h5 — сейчас наиболее часто используемая rem.Baidu — старый метод реализации, или вы можете рассчитать rem самостоятельно. , или положиться на редактор для установки плагина конвертации, то я проверил некоторую информацию, а затем записал ее здесь

стек технологий

  • vue-cli 3.0: создавайте проекты с помощью инструментов для формирования шаблонов
  • postcss-pxtorem: плагин, конвертирующий px в rem

Автоматически устанавливать размер шрифта корневого узла html

Поскольку единица rem зависит от размера шрифта корневого узла, размер rem можно динамически изменять, устанавливая размер шрифта корневого узла. Размер шрифта HTML === 1rem, в Интернете есть много вводных сведений о rem, поэтому я не буду приводить его здесь.

1. Создайте файл rem.js

# 基准大小
const baseSize = 32
# 设置 rem 函数
function setRem () {
  # 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 750
  # 设置页面根节点字体大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}

# 初始化
setRem()
# 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

1. Добавьте rem.js в main.js

# main.js
import './utils/rem'

После импорта файла вы можете проверить, добавлен ли атрибут размера шрифта в html или размер шрифта был динамически изменен, чтобы определить, был ли импорт успешным. На самом деле макет rem здесь в основном завершен, и h5 будет динамически подстраиваться под него, но таким образом, в реальной разработке нам еще предстоит вычислить, сколько rem равно px, и тогда мы используем postcss-pxtorem автоматически преобразует px в соответствующее значение rem

Используйте postcss-pxtorem для преобразования px в соответствующее значение rem

Сначала установите пакет зависимостей postcss-pxtorem

npm install postcss-pxtorem --save-dev

Далее настройте postcss-pxtorem

# vue.config.js
module.exports = {
  lintOnSave: true,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue : 16, // 换算的基数
            selectorBlackList  : [], // 忽略转换正则匹配项
            propList   : ['*'],
          }),
        ]
      }
    }
  }
}

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

Например, схема конструкции, данная дизайном, 750*1136, тогда вы можете написать ее прямо на странице.

body {
	width: 750px;
	height: 1136px;
}
# 将被转换为

body {
	widht: 23.4375rem;
	height: 35.5rem;
}
Категории