vue中PC端，移动端，H5使用lib-flexible(rem)做适配

news/2024/7/10 3:01:56 标签: vue, html, web

lib-flexible源码读后感
手把手教你html" title=vue>vue-cli3搭建项目实现移动端自适应----- flexible和 postcss-px2rem
PC端,移动端如何使用rem

需求：公司大屏项目需要使用自适应，有的屏幕分辨率是1920X1080，有的是3840X1080等等。想让项目能尽量的适应大屏中所有的分辨率，之前尝试过scale缩放的方法，这种会出现左右留白，有的客户会要求充满浏览器，如果不是尺寸正好的，scale方法是不能完全充满的。
实现：尝试使用lib-flexible（rem)+百分比的方式来实现网页的自适应布局。
注意事项：lib-flexible是为了解决移动端适配的。这篇文章主要针对网页
项目技术栈：html" title=vue>vue

下载lib-flexible

npm i lib-flexible --save

main.js引入

import "lib-flexible";

安装postcss-px2rem

代码直接使用rem单位不方便阅读,这俩使用px2rem-loader可以自动把px转成rem

npm i postcss-px2rem

在html" title=vue>vue.config.js中进行配置

const path = require("path");

function join(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  lintOnSave: false,
  // 调整 webpack 配置
  chainWebpack: config => {
    config.resolve.alias
      .set("views", join("src/views"))
      .set("utils", join("src/utils"))
      .set("components", join("src/components"));
  },
  // css相关配置
  css: {
    // 启用 CSS modules
    modules: false,
    // 是否使用css分离插件
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          //remUnit这个配置项的数值是多少呢？？？ 通常我们是根据设计图来定这个值，原因很简单，便于开发。
          //假如设计图给的宽度是1920，我们通常就会把remUnit设置为80，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。
          // 这里我是按照24等分来划分的,大家也可以按照10等分的话就是192，但是一定记得要去改lib-flexible源码才可以
          require("postcss-px2rem")({
            remUnit: 80
          })
        ]
      }
    }
  }
};

像H5页面就可以根据750的设计稿平均分10分，配置这个remUnit为75
修改lib-flexible的源码
这个是未修改之前的

// flexible.js
function refreshRem() {
  var width = docEl.getBoundingClientRect().width
  if (width / dpr > 540) {
    width = 540 * dpr
  }
  var rem = width / 10
  docEl.style.fontSize = rem + 'px'
  flexible.rem = win.rem = rem
}

可以看到官方源码是屏幕大于540的时候根元素的大小一直是54
修改源码以后就可以适配网页
此时宽度用px就可以适配所以的网页大小了，高度也可以使用px去做自适应，但是前提是html,body等父元素的设置上100%，不然里面的元素写100%无法继承高度
但是需要注意的是行内样式设置的px无法被转换成自适应的rem

在这里插入图片描述

需要注意的点：lib-flexible给body元素加上了12px的字体大小，官方解释：body上设置12 * dpr的font-size值，为了重置页面中的字体默认值，不然没有设置font-size的元素会继承html上的font-size，变得很大
大家可以根据自己的项目需要来，如果不需要body加字号，可去源码中进行注销