配置前言

项目构建：基于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. 一次CentOS 出现“Too many open files"错误的解决

    一.原因分析 出现本问题,应该是打开文件最多数量不足,默认是1024个,在生产环境中经常出现该问题. 使用ulimit -a 查看打开文件数量限制 二.解决方案A(临时有效) 1.如果是非root用户 ...

  2. jxg项目Day4-数据库和mybatis的连接映射

    配置:yml配置文件中配置数据库的参数,还有映射的参数 1.建实体类User,属性与数据库表对应 2.Mapper包下建UserMapper,继承BaseMapper<User> 3.Se ...

  3. c++中的构造函数，拷贝构造函数和赋值函数

    1.拷贝构造和赋值函数的区别: 1)拷贝构造函数是一个对象初始化一块内存区域,这块内存就是新对象的内存区,而赋值函数是对于一个已经被初始化的对象来进行赋值操作. 2)一般来说在数据成员包含指针对象的时 ...

  4. mysql8.0以后的版本开启远程连接：

    mysql8.0以后的版本开启远程连接: 1 CREATE USER 'root'@'%' IDENTIFIED BY '你的密码'; 2 GRANT ALL ON *.* TO 'root'@'%' ...

  5. el-admin角色编辑功能详解

    1.首先el-admin中的编辑和删除功能重新写成为了一个组件 data和permission都是父组件向子组件传参.data传的是当前表格中选中行的这条数据,permission是定义的一个对象. ...

  6. classload加载机制

    BootstrapClassLoader.ExtClassLoader.AppClassLoader实际是查阅相应的环境属性sun.boot.class.path.java.ext.dirs和java ...

  7. linux网络编程中的errno处理

    在Linux网络编程中,errno是一个非常重要的变量.它记录了最近发生的系统调用错误代码.在编写网络应用程序时,合理处理errno可以帮助我们更好地了解程序出现的问题并进行调试. 通常,在Linux ...

  8. IntelliJ IDEA 下载安装及配置使用教程（图文步骤详解）

    前言 壹哥在前面的文章中,带大家下载.安装.配置了Eclipse这个更好用的IDE开发工具,并教会了大家如何在Eclipse中进行项目的创建和代码编写.运行.但是实际上,在各种IDE开发工具中,Ecl ...

  9. cost function 成本函数

    cost function 成本函数 cost function-成本函数 1.目标 :实现和探索具有一个变量的线性回归的成本函数. import numpy as np %matplotlib wi ...

  10. 武装你的WEBAPI-ODATA聚合查询

    本文属于OData系列 目录 武装你的WEBAPI-OData入门 武装你的WEBAPI-OData便捷查询 武装你的WEBAPI-OData分页查询 武装你的WEBAPI-OData资源更新Delt ...