配置前言

项目构建：基于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. 5.Vue前后端交互

    一.前后端交互模式 1.1 接口调用方式 原生ajax 基于JQuery的ajax fetch axios 返回一个完整的HTML页面 也可以只返回特定格式的数据,比如json 1.2 URL地址格式 ...

  2. Ansys经验之：杨氏模量的本质概念理解——仿真在线工作记录

    Ansys经验之:什么是杨氏模量? 这是我见到的很多来培训的结构力学仿真人员的困惑,始终不能只管理解,但又是一个入门的重要概念. 本质:杨氏模量=应力/应变,即单位应变的应力.那什么叫单位应变呢,也很 ...

  3. tuxedo How To Disable Server Side Trace Which IS Enabled BY Client?

    影响版本: Oracle Tuxedo - Version 8.1 to 11.1.1.2.0Information in this document applies to any platform. ...

  4. 华为云服务器搭建FTP后，内网访问无法连接。

    总结:1.内网访问公网需要用被动模式 2.云服务器需要放开除20.21以外的部分端口,指定范围 3.PASV IP配置为云服务器的弹性公网IP 4.局域网使用主动模式连接FTP,客户端需要关闭防火墙, ...

  5. 使用react-vite-antd，修改antd主题，报错 [vite] Internal server error: Inline JavaScript is not enabled. Is it set in your options? It is hacky way to make this function will be compiled preferentially by less

    一般报错 在官方文档中,没有关于vite中如何使用自定义主题的相关配置,经过查阅 1.安装less  yarn add less (已经安装了就不必再安装) 2.首先将App.css改成App.les ...

  6. 打不过AI就拉拢？ChatGPT和MidJourney已成我小秘书！

    为了体验AI,晓衡这两周战斗力爆棚了! 每天大概睡了四~五个小时,而且中午也没有休息过,但精神却还很亢奋. 直到周一下午,身体才有种被掏空的感觉,晚上 10 点就睡了.可能是兴奋劲还在,早晨不到 6 ...

  7. MySQL学习（一）大纲

    1.逻辑架构 参考博客:https://blog.csdn.net/fuzhongmin05/article/details/70904190 最上层为客户端层,并非mysql独有,诸如:连接处理.授 ...

  8. 解决docker容器不足问题

    df -h查看容量,看看那个被占满了,之前我这里是100% 用了一下docker system prune,发现没啥用,又加了-a:docker system prune -a,就又空间了. 之后再进 ...

  9. docker 部署 postgres

    1. 打开dockerhub查找postgres版本 地址 https://registry.hub.docker.com/_/postgres/tags 2.复制需要的版本 docker pull ...

  10. Hello, YOU -- 通过简单的 hello_test.go 程序理解并学会编写测试

    Hello, YOU 书接上文上篇文章中,我们尝试编写了hello word 函数以及第一个测试 hello_test package main import "fmt" func ...