zoukankan      html  css  js  c++  java
  • 使用rem配置PC端自适应大屏

    效果如下

    使得大屏不论在什么宽高比例依然能展示全部数据

    安装

    npm install -S postcss-pxtorem
    

    rem配置思路

    原先的rem函数是能解决大部分的问题的,如果展示不全,也可以用滚动条。

    但是大屏展示又不能使用滚动条,又必须展示全部的内容,这个时候就需要改变原来的计算方式,需要根据屏幕的实际高度来计算对应的屏幕宽度

    1. 配置rem.js文件

    rem.js可以放在src文件夹下,我是放在src下的utils文件夹中

    初始的rem配置

    // 设置 rem 函数
    function setRem () {
        //  PC端
        console.log('非移动设备')
        // 基准大小
        baseSize = 100;
        let basePc = baseSize / 1920; // 表示1920的设计图,使用100PX的默认值
        let vW = window.innerWidth; // 当前窗口的宽度
        
        let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
        document.documentElement.style.fontSize =  rem + "px";
    }
    // 初始化
    setRem();
    // 改变窗口大小时重新设置 rem
    window.onresize = function () {
      setRem()
    };
    

    修改后的rem配置

    // 设置 rem 函数
    function setRem () {
        //  PC端
        console.log('非移动设备')
        // 基准大小
        baseSize = 100;
        let basePc = baseSize / 1920; // 表示1920的设计图,使用100PX的默认值
        let vW = window.innerWidth; // 当前窗口的宽度
        let vH = window.innerHeight; // 当前窗口的高度
        // 非正常屏幕下的尺寸换算
        let dueH = vW * 1080 / 1920
        if (vH < dueH) { // 当前屏幕高度小于应有的屏幕高度,就需要根据当前屏幕高度重新计算屏幕宽度
          vW = vH * 1920 /1080
        }
        let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
        document.documentElement.style.fontSize =  rem + "px";
    }
    // 初始化
    setRem();
    // 改变窗口大小时重新设置 rem
    window.onresize = function () {
      setRem()
    };
    

    2. postcss-pxtorem配置

    postcss的配置项

    rootValue: 100, //换算基数, 默认100  ,这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
    propList: ["*"] //可以从px更改到rem的属性,值需要精确匹配。
    // 1.使用通配符 * 启用所有属性。 示例:['*']
    // 2.在单词的开头或者结尾使用 *。 ( ['*position*'] 将匹配 background-position-y )
    // 3.使用 与属性不匹配。! 示例:['*','letter-spacing']!
    // 4.将"非"前缀与其他前缀合并。 示例:['*','font*']!
    unitPrecision: 5, //允许REM单位增长到的十进制数字。
    propWhiteList: [],  //默认值是一个空数组,这意味着禁用白名单并启用所有属性。
    propBlackList: [], //黑名单
    exclude: /(node_module)/,  //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
    selectorBlackList: [], //要忽略并保留为px的选择器
    ignoreIdentifier: false,  //(boolean/string)忽略单个属性的方法,启用ignoreidentifier后,replace将自动设置为true。
    replace: true, // (布尔值)替换包含REM的规则,而不是添加回退。
    mediaQuery: false,  //(布尔值)允许在媒体查询中转换px。
    minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
    

    主要使用了两个配置项,我的配置如下

    {
      "name": "",
      "version": "0.1.0",
      "private": true,
      "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
      },
      "dependencies": {
        "animate.css": "^3.7.2",
        "echarts": "^4.2.1",
        "element-ui": "^2.11.1",
        "node-sass": "^4.13.1",
        "nprogress": "^0.2.0",
        "scss": "^0.2.4",
        "scss-loader": "0.0.1",
        "v-charts": "^1.19.0",
        "vue": "^2.6.10",
        "vue-router": "^3.0.6",
        "vuex": "^3.1.1",
      },
      "devDependencies": {
        "@vue/cli-plugin-babel": "^3.7.0",
        "@vue/cli-plugin-eslint": "^3.7.0",
        "@vue/cli-service": "^3.7.0",
        "axios": "^0.18.0",
        "babel-eslint": "^10.0.1",
        "babel-plugin-component": "^1.1.1",
        "babel-plugin-transform-remove-console": "^6.9.4",
        "compression-webpack-plugin": "^3.1.0",
        "eslint": "^5.16.0",
        "eslint-plugin-vue": "^5.2.2",
        "lib-flexible": "^0.3.2",
        "postcss-pxtorem": "^4.0.1",
        "pug": "^2.0.3",
        "pug-plain-loader": "^1.0.0",
        "px2rem-loader": "^0.1.9",
        "sass-loader": "^7.3.1",
        "stylus": "^0.54.5",
        "stylus-loader": "^3.0.2",
        "vue-cli-plugin-element": "^1.0.1",
        "vue-particles": "^1.0.9",
        "vue-template-compiler": "^2.6.10"
      },
      "eslintConfig": {
        "root": true,
        "env": {
          "node": true
        },
        "extends": [
          "plugin:vue/essential",
          "eslint:recommended"
        ],
        "rules": {},
        "parserOptions": {
          "parser": "babel-eslint"
        }
      },
      "postcss": {
        "plugins": {
          "autoprefixer": {},
          "postcss-pxtorem": {
            "rootValue": 100, // 必须要和rem.js内容中的baseSize一样
            "propList": [
              "*"
            ]
          }
        }
      },
      "browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 8"
      ]
    }
    

    3. 在main.js中导入

    import './utils/rem'
    

    4. 项目中实际使用

    至此,一个适配不同尺寸的大屏展示方案就算初步完成了,下面我们看html布局和css代码

    html部分,配置pug就不说了

    <template lang="pug">
      div#screen-wrapper
        div.header-wrapper
        div.main-wrapper
          div.mid-wrapper
          div.right-wrapper
          div.left-wrapper
    </template>
    // 这里是一个简单的上下布局
    <script src="./control.js"></script>
    
    <style scoped lang="stylus" src="./style.styl"></style>
    

    css部分,使用的是styls。

    大屏的展示部分一定要使用px来设定宽高,使用绝对定位来让元素定位在水平垂直居中。

    我的设计稿是按1920*1080,如果是一个比例,肯定就不会变动,但是当屏幕的实际高度小于这个展示应有高度的时候,rem就会重新计算,这个时候我就能让页面能完全居中展示

    #screen-wrapper
      width 100vw
      height 100vh
      background-size 100% 100%
      overflow hidden
      position relative
      .header-wrapper
        1920px
        height: 64px;
        overflow-x hidden
        position absolute
        left 0
        right 0
        top 0
        margin 0 auto
      .main-wrapper
        overflow hidden
        position absolute
        left 0
        right 0
        top 64px
        margin 0 auto
        width 1920px
        height calc(100% - 64px)
        display flex
        justify-content space-between
        align-items center
        .left-wrapper
          width 25%
          height 100%
        .mid-wrapper
          width 48%
          height 100%
        .right-wrapper
          width 25%
          height 100%
    

    这个方案也不是很完美,由于一时间难以重做整个大屏,只能在原先的基础上修改,所以参考了大屏上的全屏页面的自适应适配方案,该篇文章有一整套解决方案,经过测试是可以实现的大屏完全展示,效果实现和参考文章内的demo效果是一样的


    参考资料:

    大屏上的全屏页面的自适应适配方案

    vue3.0中使用postcss-pxtorem

    vue+px2rem实现pc端大屏自适应(rem适配)

  • 相关阅读:
    10. Regular Expression Matching
    9. Palindrome Number (考虑负数的情况)
    8. String to Integer (整数的溢出)
    7. Reverse Integer (整数的溢出)
    LeetCode Minimum Size Subarray Sum
    LeetCode Course Schedule II
    Linux 文件缓存 (一)
    LeetCode Tries Prefix Tree
    Linux : lsof 命令
    LeetCode Binary Tree Right Side View
  • 原文地址:https://www.cnblogs.com/WhiteM/p/12720849.html
Copyright © 2011-2022 走看看