Vue PC端分辨率自适应

因为在做超市POS收银系统的时候，遇到需要适配不同的PC端的分辨率，原来PC还能做自适应的呀，感觉发现了新大路，于是打算做一下笔记。当然我在做的过程中也借鉴了其他大佬的写的，如：https://blog.csdn.net/weixin_41257563/article/details/97266234先下载所需要的插件npm i lib-flexible -Snpm i px2rem...

wangjinsheng593

3466人浏览 · 2019-11-29 11:59:54

wangjinsheng593 · 2019-11-29 11:59:54 发布

因为在做超市POS收银系统的时候，遇到需要适配不同的PC端的分辨率，原来PC还能做自适应的呀，感觉发现了新大路，于是打算做一下笔记。

当然我在做的过程中也借鉴了其他大佬的写的，如：

https://blog.csdn.net/weixin_41257563/article/details/97266234

先下载所需要的插件

npm i lib-flexible -S
npm i px2rem-loader -D

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

import 'lib-flexible'

在这里插入图片描述

vue-cli3配置方式：我是在vue.config.js里面做的配置，代码如下：

    config.module
      .rule("css")
      .test(/\.css$/)
      .oneOf("vue")
      .resourceQuery(/\?vue/)
      .use("px2rem")
      .loader("px2rem-loader")
      .options({
      
        remUnit: 192
      });
  },

在这里插入图片描述

获取屏幕宽度，并修改宽度，自定设置屏幕的宽度，修改文件为：flexible.js
路劲： node_modules/lib-flexible/flexible.js

打完收工

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^