Настроить адаптивный макет vw в vue-cli4 с нуля

Vue.js

Введение

ViewportWidth также является макетом vw, который намного проще в настройке, чем макет rem.

Нет необходимости настраивать и устанавливать пакет lib

Также нет необходимости добавлять файл rem.js

называется использованием сумки

Инсталляционный пакет

npm install postcss-px-to-viewport -D

или

yarn add postcss-px-to-viewport -D

Настроить мобильный

Найдите loaderOptions в vue.config.js, если нет, вам нужно добавить его в свойство css.
ViewportWidth основан на черновике дизайна.Мобильный терминал обычно основан на 375 ширине 6s.

css: {
    extract: IS_PROD,
    sourceMap: false,
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-px-to-viewport")({
            unitToConvert: "px",	// 需要转换的单位，默认为"px"
            viewportWidth: 375,   // 视窗的宽度，对应移动端设计稿的宽度，一般是375
            // viewportHeight:667,// 视窗的高度，对应的是我们设计稿的高度
            unitPrecision: 3,		// 单位转换后保留的精度
            propList: [		// 能转化为vw的属性列表
              "*"
            ],
            viewportUnit: "vw",		// 希望使用的视口单位
            fontViewportUnit: "vw",		// 字体使用的视口单位
            selectorBlackList: [],	// 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
            minPixelValue: 1,		// 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
            mediaQuery: false,		// 媒体查询里的单位是否需要转换单位
            replace: true,		// 是否直接更换属性值，而不添加备用属性
            exclude: /(\/|\\)(node_modules)(\/|\\)/,		// 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
          })
        ]
      }
    }
  },

Эффект

Под разными моделями мы видим, что размер шрифта будет меняться соответственно

настроить компьютер

Поле viewportWidth изменено в соответствии с проектом, обычно 1920*1080, поэтому установите здесь 1920.

css: {
    extract: IS_PROD,
    sourceMap: false,
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-px-to-viewport")({
            unitToConvert: "px",	// 需要转换的单位，默认为"px"
            viewportWidth: 1920,   // 视窗的宽度，对应pc设计稿的宽度，一般是1920
            // viewportHeight: 1080,// 视窗的高度，对应的是我们设计稿的高度
            unitPrecision: 3,		// 单位转换后保留的精度
            propList: [		// 能转化为vw的属性列表
              "*"
            ],
            viewportUnit: "vw",		// 希望使用的视口单位
            fontViewportUnit: "vw",		// 字体使用的视口单位
            selectorBlackList: [],	// 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
            minPixelValue: 1,		// 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
            mediaQuery: false,		// 媒体查询里的单位是否需要转换单位
            replace: true,		// 是否直接更换属性值，而不添加备用属性
            exclude: /(\/|\\)(node_modules)(\/|\\)/,		// 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
          })
        ]
      }
    }
  },

Эффект

Возьмем в качестве примера шрифты, и мы также увидим, что шрифты имеют разные размеры при разных разрешениях.

Настройте адаптивный макет vw в nuxt с нуля

использованная литература

Использование плагина postcss-px-to-viewport в vue-cli для мобильной адаптации

В проекте Vue (vue4.0) используйте подключаемый модуль адаптивного макета postcss-px-to-viewport.

Как использовать vw в проекте Vue для достижения мобильной адаптации

Категории