当前位置：首页 > news >正文

界面自适应new 使用postcss-pxtorem

news 来源：原创 2025/5/17 23:24:07

一、在index.html头部加入手机端自适应meta

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

二、vue项目中使用postcss-pxtorem

安装插件

npm install postcss postcss-pxtorem --save-dev

插件的基本配置
根目录下创建postcss.config.js文件

export default {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 1, // 表示根元素字体大小或根据input参数返回根元素字体大小
      unitPrecision: 5, // 单位转换后的精度
      /**
       *  使用通配符 * 以启用所有属性。例如：['*']
          在单词的开头或结尾使用 *。（['*position*'] 将匹配 background-position-y）
          使用 ! 来排除某个属性。例如：['*', '!letter-spacing']
          可以将 "not" 前缀与其他前缀结合使用。例如：['*', '!font*']
       */
      propList: ['*'], // 需要做转化处理的css属性  * 就是所有属性都要转换，如`hight`、`width`、`margin`等，`*`表示全部
      // 若想设置部分样式不转化 可以在配置项中写出
      // eg: 除 border和font-size外 所有px均转化为rem
      // propList: ["*", "!border","!font-size"],
      // exclude: /node_modules/i, // 这里表示不处理node_modules文件下的css
      selectorBlackList: ['ignore-'], // 过滤掉ignore-开头的class，不进行rem转换
      // mediaQuery: false, // 是否在媒体查询中也转换 px
      minPixelValue: 2, // 最小px为2，如果设置1px则不转rem
      replace: true, // 是否更换属性值，而不是添加一个rem的新属性
    }
  }
}

自定义配置rem基数
app.vue

<script setup>
import { RouterView } from 'vue-router'
import { onMounted, onBeforeUnmount } from 'vue'

/**
 * resize 重新计算方法
 */
const resize = () => {
  const deviceWidth = document.documentElement.clientWidth
  document.documentElement.style.fontSize = deviceWidth / 375 + 'px'
}

onMounted(() => {
  resize()
  window.addEventListener('resize', resize)
})

// 销毁钩子函数
onBeforeUnmount(() => {
  window.removeEventListener('resize', resize)
})

</script>

<template>
  <RouterView />
</template>

<style scoped>
header {
  line-height: 1.5;
  max-height: 100vh;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
  margin-top: 2rem;
}

nav a.router-link-exact-active {
  color: var(--color-text);
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}

nav a:first-of-type {
  border: 0;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }

  nav {
    text-align: left;
    margin-left: -1rem;
    font-size: 1rem;

    padding: 1rem 0;
    margin-top: 1rem;
  }
}
</style>