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

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

main.js引入

import "lib-flexible";
安装postcss-px2rem
  • 代码直接使用rem单位不方便阅读,这俩使用px2rem-loader可以自动把px转成rem
npm i postcss-px2rem 
  • 在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加字号,可去源码中进行注销
Logo

前往低代码交流专区

更多推荐