配置前言

项目构建：基于vue-cli3构建，使用postcss-px2rem px2rem-loader插件进行rem适配
实现原理：每次打包，webpack通过使用插件postcss-px2rem，帮我们自动将px单位转换成rem单位
前方有坑：UI框架部分组件使用JavaScript将css作为内联样式直接写在html标签内，打包适配时不会读取相关css,所以要配置相关样式，在style中需要" !important "进行样式覆盖。

首先了解下 rem与px的转换

rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值，这个参考值设置为多少，完全可以根据您自己的需求来定。 我们知道，浏览器默认的字号（font-size）16px，来看一些px单位与rem之间的转换关系：

|  px  |     rem       |

------------------------

|  12  | 12/16 = .75   |

|  14  | 14/16 = .875  |

|  16  | 16/16 = 1     |

|  18  | 18/16 = 1.125 |

|  20  | 20/16 = 1.25  |

|  24  | 24/16 = 1.5   |

|  30  | 30/16 = 1.875 |

|  36  | 36/16 = 2.25  |

|  42  | 42/16 = 2.625 |

|  48  | 48/16 = 3     |

-------------------------

当然浏览器 html根元素的font-size的值我们是可以设置的 例如 font-size: 14px；那么1rem就是14px

一，安装postcss-px2rem及px2rem-loader,建议cnpm

1 npm install postcss-px2rem px2rem-loader --save

二，在根目录src中新建utils目录下新建rem.js等比适配文件

// rem等比适配配置文件
// 基准大小

 1 const baseSize = 16

 2 // 设置 rem 函数

 3 function setRem () {

 4   // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。

 5   const scale = document.documentElement.clientWidth / 1920

 6   // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）

 7   document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'

 8 }

 9 // 初始化

10 setRem()

11 // 改变窗口大小时重新设置 rem

12 window.onresize = function () {

13   setRem()

14 }

三，在main.js中引入适配文件

1 import './utils/rem'

四，到vue.config.js中配置插件

// 引入等比适配插件

const px2rem = require('postcss-px2rem')

// 配置基本大小

const postcss = px2rem({

  // 基准大小 baseSize，需要和rem.js中相同

  remUnit: 16

})

// 使用等比适配插件

module.exports = {

  lintOnSave: true,

  css: {

    loaderOptions: {

      postcss: {

        plugins: [

          postcss

        ]

      }

    }

  }

}

vue项目PC端如何适配不同分辨率屏幕的更多相关文章

  1. 基于vue-cli的vue项目移动端样式适配，lib-flexible和postcss-px2rem

    安装 flexible和 postcss-px2rem(命令行安装) npm install lib-flexible --save npm install postcss-px2rem --save ...

  2. 基于vue-cli3的vue项目移动端样式适配，lib-flexible和postcss-px2rem

    1,安装 flexible和 postcss-px2rem(命令行安装) npm install lib-flexible --save npm install postcss-px2rem --sa ...

  3. & vue项目中的rem适配

    有个朋友问我在vue项目怎么做rem适配,我工作中都是用的dva,但是我感觉道理都是一样的,换汤不换药.配完就顺手写下来吧! 需要安装两个插件库 lib-flexible和px2rem-loader ...

  4. vue实现PC端分辨率适配

    lib-flexible + px2rem Loader lib-flexible 阿里伸缩布局方案 px2rem-loader:px转rem: 依赖 首先需要安装 vue-cli 脚手架,这里我安装 ...

  5. vue项目更改端口号

    vue项目的默认端口为8080,有时候处于某些原因会造成端口号的冲突,因此需要我们适当的更改其端口号来解决问题,将上图中的port更改为合适的端口号就可以,但是需要注意的是浏览器的安全限制端口号详情见 ...

  6. vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式

    进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> &l ...

  7. vue项目使用vw单位适配移动端方法

    传送门:  https://blog.csdn.net/zjw0742/article/details/79337336

  8. Vue项目移动端滚动穿透问题

    概述 今天在做 Vue 移动端项目的时候遇到了滚动穿透问题,在网上查资料后,选取了我觉得最好的方法,记录下来供以后开发时参考,相信对其他人也有用. 上层无需滚动 如果上层无需滚动的话,直接屏蔽上层的 ...

  9. ** PC端完美兼容各种分辨率的简便方法 **

    原文链接:https://blog.csdn.net/qq_43156398/article/details/102785370 PS:此方法需使用到less或者scss的@变量来支持 以设计图 19 ...

  10. vue实现pc端上拉加载功能，不兼容移动端

    所用插件:Mock.js 这个只用到它简单的功能,拦截ajax请求. vue和axios,vue基础知识请看文档. axios类似于jquery的ajax方法. 以下是是该功能所有代码,其中mock的 ...

随机推荐

  1. Microsoft.CppCommon.targets(138,5): error MSB3073

    我生成 Zlib 库的某个项目的时候,出现了这些error,原来是项目属性---->生成后事件--->命令行 错误的内容就是命令行内容.这些命令行的具体作用我还不知道,但是把他们删除后就成 ...

  2. Matlab %补充---用的多的函数

    Input  promat = 'This is a sentence.' x = input(prompt) %显示prompt中的文本并等待用户输入数值或者表达式后按Return %如果用户什么都 ...

  3. 网站下/.git/index查看

    遇见有些网站目录中存在 http://target.com/.git/index 由于index是二进制文件 下载回来本地查看 初始化 下载到.git目录 git checkout-index -a

  4. [Lua]敏感字检测

    参考链接: https://zhuanlan.zhihu.com/p/84685657 https://www.cnblogs.com/luguoshuai/p/9254190.html 一开始打算使 ...

  5. VScode_Keter_自用

    1.软件下载 支持win/linux/mac平台,安装有两种形式,根据个人喜好进行选择即可: 1.安装包 a.官网下载地址:https://code.visualstudio.com/ (速度慢) b ...

  6. OpenJudge2811:熄灯问题（枚举）

    熄灯问题 有一个由按钮组成的矩阵,其中每行有6个按钮,共5行.每个按钮的位置上有一盏灯.当按下一个按钮后,该按钮以及周围位置(上边.下边.左边.右边)的灯都会改变一次.即,如果灯原来是点亮的,就会被熄 ...

  7. 在目标服务器Centos7上安装 GitLab Runner

    1.安装提示: 注意:如果你打算通过gitlab-ci,将项目部署到"目标服务器"上,那么这个GitLab Runner就要提前安装到这个"目标服务器"上 (这 ...

  8. IOS开发基础之核心动画 基础动画、关键帧、组动画案例

    // // ViewController.m // 30-核心动画 // // #import "ViewController.h" @interface ViewControll ...

  9. File 未释放文件权柄问题处理

    Unreleased Resource: Files Abstract 程序可能无法释放某个文件句柄. Explanation 程序可能无法成功释放某一个文件句柄. 资源泄露至少有两种常见的原因: - ...

  10. day07-SpringBoot接收参数相关注解

    SpringBoot接收参数相关注解 1.基本介绍 SpringBoot接收客户端提交数据/参数会使用到相关注解 详解@PathVariable.@RequestHeader.@ModelAttrib ...