配置前言

项目构建：基于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. python中and和or表达式的返回值

    a or b 首先明确运算顺序, 从左至右 # 其次只要存在真就会返回真, and返回的是最后一个真, or返回的是第一个真 # 再次, a,b中存在假, 则and返回第一个假, or返回最后一个假 ...

  2. 探究Tomcat

    一.什么是Tomcat? 用来装载javaWeb程序,可以称它为Web容器.是一个运行java的网络服务器,底层是Sochet的一个程序,他也是JSP和Servlet的一个容器. 二.什么要用Tomc ...

  3. 通过右键菜单生成pyd

    批处理 @echo off reg add "HKCR\AllFilesystemObjects\shell\构建PYTHON\command" /ve /t REG_SZ /d ...

  4. Kibana+X-pack安装使用

    安装Kibana 下载解压安装包,一定要装与ES相同的版本 下载地址: https://www.elastic.co/downloads/kibana wget https://artifacts.e ...

  5. day1 第一个程序“Hello world！”

    程序运行机制 源程序(.java文件)->java编译器->字节码(.class文件)->类装载器->字节码校验器->解释器->操作系统平台Java源码后缀名:.j ...

  6. AbstractRoutingDataSource - 动态数据源

    AbstractRoutingDataSource 类说明: (1)它的抽象方法 determineCurrentLookupKey() 决定使用哪个数据源. (2)项目启动时,先调用 setTarg ...

  7. ovs-dpdk：revalidator源码解析

    revalidator是做什么的?需要知道哪些东西? 有关于revalidator需要弄明白的是以下三个问题: 通过ovs-vsctl list open_vs可以看到other_config里面有两 ...

  8. 小笨自采集在线电脑壁纸 v2.0-支持移动端自适应，支持https

    这周闲着没事,翻着网站,记得去年的发表的一篇文章小笨分享一款高清电脑壁纸API,主要是将孟坤壁纸改造支持https,还加了一个搜索功能.以前的壁纸是这样的: 但是,不支持移动端浏览,于是小笨趁着这周周 ...

  9. 使用 Solon Cloud 的 Jaeger 做请求链路跟踪

    <dependency> <groupId>org.noear</groupId> <artifactId>jaeger-solon-cloud-plu ...

  10. python自动化测试pyautogui,pywinauto和pywin32组合使用初级

    1 前言PC 端自动化测试使用到的 python 模块主要有 pywinauto.win32gui.pyautogui,主要功能如下: pywinauto:主要使用到 Application 类,用于 ...