• vue项目PC端如何适配不同分辨率屏幕


    配置前言

    项目构建:基于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
            ]
          }
        }
      }
    }
  • 相关阅读:
    [CQOI2006]凸多边形
    NOIP后省选集训前文化课划水记
    FFT字符串匹配
    ghj1222的代码规范
    博弈论
    P1350 车的放置
    P2110 欢总喊楼记
    虫食算
    3192: [JLOI2013]删除物品
    逛公园
  • 原文地址:https://www.cnblogs.com/shun1015/p/14755655.html
Copyright © 2020-2023  润新知