vue移动端适配

东北狍子

已于 2022-07-15 15:29:22 修改

阅读量216

点赞数

分类专栏： vue js 文章标签： vue.js postcss 前端

于 2022-07-15 15:13:55 首次发布

本文链接：https://blog.csdn.net/web5197/article/details/125803580

版权

本文介绍了如何在Vue项目中进行移动端适配，通过postcss-px-to-viewport自动将px转化为viewport单位，以及使用postcss-pxtorem转化为rem单位进行开发。针对vue3和vue2，分别在vue.config.js和vite.config.js中配置postcss，并提供了安装、main.js引入及配置文件的详细步骤。

摘要由CSDN通过智能技术生成

1 · postcss-px-to-viewport将px自动转化为viewport单位

vue3 / vue2 配置文件 vue.config.js

module.exports = {
   
  css: {
   
    loaderOptions: {
   
      postcss: {
   
        plugins: [
          require("postcss-px-to-viewport")({
   
            unitToConvert: "px", // 要转化的单位
            viewportWidth: 750, // UI设计稿的宽度
            unitPrecision: 6, // 转换后的精度，即小数点位数
            propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
            viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
            fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
            landscapeUnit: "vh", // 横屏时使用的单位
            landscapeWidth: 667, // 横屏时使用的视口宽度
            selectorBlackList: [<