Проект Vue автоматически преобразует px в rem и восстанавливает чертежи с высокой точностью.

Vue.js Webpack

Не вызывает сомнения важность восстановления проектных чертежей при фронтенд-разработке, в настоящее время по-прежнему следует использовать наиболее широко используемыеrem. Однако многие до сих пор находятся в эпохе подсечно-огневого земледелия и либо сами производят расчетыremзначение или положиться на редактор для установки плагина transform.

Цель этой статьи состоит в том, что после серии конфигураций размер проектного чертежа может быть непосредственно использован в разработке, и проект будет автоматически скомпилирован для нас и преобразован вrem.

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

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

Автоматически установить корневой узелhtmlизfont-size

так какremЕдиница измерения зависит от размера шрифта корневого узла, поэтому, устанавливая размер шрифта корневого узла, можно динамически изменять размер rem.

В Интернете есть много статей, в которых рассказывается об этом принципе, и я не буду подробно объяснять его здесь.

1. Создатьrem.jsдокумент

Многие люди пишут такие файлы гаджетов и по привычке добавляют замыкания, что на самом деле не нужно. Каждый файл в ES6 — это отдельный модуль.

// 基准大小
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()
}

2. Вmain.jsвведен вrem.js 

import './utils/rem'

После импорта файла проверьте, автоматически ли добавляется html-узел страницыfont-size.

Примечание: после завершения этого шага реализуется макет rem.В фактической разработке нам все еще нужно рассчитать соответствующее значение rem для разработки.

Следующим шагом является настройка веб-пакета для автоматического преобразования px в соответствующее значение rem.

настроитьpostcss-pxtoremАвтоматически конвертировать px в rem

1. Установкаpostcss-pxtorem

$ npm install postcss-pxtorem -D

2. Измените корневой каталог.postcssrc.jsдокумент

оказатьсяpluginsАтрибуты добавляют настройки pxtorem

"postcss-pxtorem": {
  "rootValue": 32,
  "propList": ["*"],
  // 注意：如果有使用第三方UI如VUX，则需要配置下忽略选择器不转换。
  // 规则是class中包含的字符串，如vux中所有的class前缀都是weui-。也可以是正则。
  "selectorBlackList": ["weui-"]
}

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

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

body {
	width: 750px;
	height: 1136px;
}

будет преобразован в

body {
	widht: 23.4375rem;
	height: 35.5rem;
}

Примечание. Этот метод поддерживаетimportи.vueв одном файлеstyle. В настоящее время не поддерживаетсяstyleиспользуется в@import url();

---End---

Категории