配置前言

项目构建：基于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. 深入理解css 笔记（9）

    模块化 CSS 是指把页面分割成不同的组成部分,这些组成部分可以在多种上下文中重复使用,并且互相之间没有依赖关系.最终目的是,当我们修改其中一部分 css 时,不会对其他部分产生意料之外的影响.    ...

  2. Abp学习（一） abp+vue +mysql框架搭建

    一.到Abp官网下载框架 地址:https://aspnetboilerplate.com/Templates 二.打开项目 修改数据库连接为MySql,默认是SQL Server 2.1.修改链接字 ...

  3. lc.209 长度最小的子数组

    题目 给定一个含有 n 个正整数的数组和一个正整数 target . 找出该数组中满足其和 ≥ target 的长度最小的 连续子数组 [numsl, numsl+1, ..., numsr-1, n ...

  4. ssh反向代理树莓派+motion，实现公网远程视频监控

    注意:本文公网远程监控部分需要借助有公网IP的云服务器进行ssh反向代理. 一.借助motion实现内网的视频监控 准备 插上摄像头,然后输入ls /dev/video*命令检查是否识别了摄像头 安装 ...

  5. 痞子衡嵌入式：RISC-V指令集架构MCU开发那些事 - 索引

    大家好,我是痞子衡,是正经搞技术的痞子.本系列痞子衡给大家介绍的是RISC-V指令集架构微控制器相关知识. RISC-V指令集最早要追溯到2010年,是加州大学伯克利分校的一个研究团队的项目,目标是设 ...

  6. 痞子衡嵌入式：在i.MXRT1060-EVK上利用memtester程序给SDRAM做压力测试

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是在i.MXRT1060-EVK上利用memtester程序给SDRAM做压力测试. 我们知道恩智浦i.MXRT1xxx系列是高性能MCU ...

  7. CURL 常用命令

    参考博客:https://blog.csdn.net/wangpengfei163/article/details/80900391

  8. 设计一款可扩展和基于windows系统的一键处理表格小工具思路

    原创总结/朱季谦 设计一款可扩展和基于windows系统的一键处理表格小工具思路 日常开发当中,业务人员经常会遇到一些重复性整理表格的事情,这时候,就可以通过一些方式进行自动化程序处理,提高工作(摸鱼 ...

  9. 关于 manacher 的一个小细节

    在该算法中,我们需要用到一个数组 hw[i] ,代表 i 的最大回文半径.而且这个半径不包括 i 本身(若串为 ccc 则 hw 为 1). 这时最终答案为最大的 hw 减一. 为什么要减一呢?最终的 ...

  10. 获取了文心一言的内测及与其ChatGPT、GPT-4 对比结果

    百度在3月16日召开了关于文心一言(知识增强大语言模型)的发布会,但是会上并没现场展示demo.如果要测试的文心一言 也要获取邀请码,才能进行测试的. 我这边通过预约得到了邀请码,大概是在3月17日晚 ...