vue pc端自适应各个屏幕-CFANZ编程社区

vue pc端自适应各个屏幕

使用的方案 lib-flexible-computer + px2remLoader + postcss-px2rem

lib-flexible：阿里可伸缩布局方案
px2rem-loader：px 转 rem
postcss-px2rem： 将代码中px自动转化成对应的rem的一个插件
	下面这个插件会代替lib-flexible 更好一些 适用于pc
	npm i lib-flexible-computer -S //根节点会根据页面视口变化而变化font-size大小
	安装这个的话就不需要下面flexible文件修改了

查阅的其他人的链接
http://www.codebaoku.com/it-js/it-js-205513.html
强推！！！https://javaforall.cn/127968.html
https://blog.csdn.net/waillyer/article/details/108239340
https://blog.csdn.net/qq_38902230/article/details/109024871
没用到但是感觉有用
https://codeantenna.com/a/U8Sv11WUle

安装依赖

引入
安装好了之后还需要在项目的入口文件 main.js 里引入 lib-flexible

// main.js
import 'lib-flexible'

如下图所示
请添加图片描述
3. 配置px2rem
链接里面是下面截图这种，但是我重启之后就会报错 config为定义；

所以我查阅了其他文档
在vue.config.js中下方代码

css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            remUnit: 192 //设计图宽度/10
          })
        ]
      }
    },
  },

例如下图：
请添加图片描述

font-size显示54px 也就是1rem=54px 是不对的

function refreshRem(){ 
      var width = docEl.getBoundingClientRect().width;
      if (width / dpr > 540) { 
   
          width = width * dpr;
      }
      var rem = width / 10;
      docEl.style.fontSize = rem + 'px';
      flexible.rem = win.rem = rem;
  }

请添加图片描述

看到其他链接中也有写道因为修改了flexible.js，每次装依赖，都需要改动，这里提取出来就好：在utils目录下新建flexible.js文件；然后把node_moudles下lib-flexible下flexible.js复制出来引入就可以了

  将刚才修改的 flexible.js 文件 copy 到 scr/utils 目录（可随意放置）

  main.js 引入 lib-flexible    import './utils/flexible.js' (路径为flexible.js放置路径)

对于不想被转换的样式，可在其后添加 /no/ 保证不被转换
font-size: 18px;/no/

我在过程中遇到的问题

查看自己的脚手架版本号

0 条评论