前端适配lib-flexible与postcss-px2rem

江湖yi山人

已于 2022-04-09 19:16:51 修改

阅读量1.8k

点赞数

文章标签： postcss css js

于 2022-04-07 18:14:06 首次发布

本文链接：https://blog.csdn.net/qq_30997503/article/details/124017862

版权

为了更好地将页面展示在不同的设备上，往往需要做一些适配处理。本文介绍了flexible和px2rem搭配处理网页适配的问题。

// 安装依赖
yarn add  lib-flexible postcss-px2rem --save

1 flexible

flexible的作用是让前端页面在不同的设备上合理展示。
两种引入方法如下：

1.1 资源引入

在publish/index.html文件中引入
外部引入：

// 加载CDN
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

内部引入：
将.css和.js文件下载到本地（flexible.js），然后再引入，效果一样

<script src="./js/flexible.js"></script>
<link rel="stylesheet" href="./css/index.css" rel="external nofollow" />

引入成功后，查看页面元素是，标签中新增了data-dpr和font-size元素，如下：

<html lang="en" data-prerendered="false" base-rem="750" data-dpr="1" style="font-size: 750px;">
...
...
</html>

css和js模板文件网上随处可见，看似很复杂，核心缺只有十来行。
实际上，flexible做了以下三件事：

动态改写标签
给添加data-dpr属性，并动态改写
给添加font-size属性，并动态改写

1.2 依赖导入

在入口index.js文件中导入

import 'lib-flexible'

2 postcss-px2rem

postcss-px2rem是一种将px转为rem的插件

2.1 在webpack.config.js中引入

主要是建立一套标准，进行px=>rem转换的标准，使页面的元素都以rem*rem的形式存在，以适应不同设备。

const baseSize = document.documentElement.clientWidth // root的font-size，这里直接按屏宽处理
...
// 找到postcss-loader
{
 
  loader: require.resolve('postcss-loader'),
  options: {
   
    ident: 'postcss',
    plugins: () => [
      require('postcss-flexbugs-fixes'),
      require('postcss-preset-env')({
        autoprefixer: {
          flexbox: 'no-2009',
        },
        stage: 3,
      }),
      // 核心部分，根据项目需求进行调整
      require('postcss-px2rem')({
      	// 1rem={baseSize}px，此项目中的页面构建都将以这一标准，转为rem*rem的格式
        remUnit: baseSize, 
      })
    ],
    sourceMap: isEnvProduction && shouldUseSourceMap,
  },
},

2.2 注释掉index.html中关于viewport的标签

这一步没有必要，注掉的目的只是为了预防viewport和flexible可能存在的冲突，即保证当前项目仅存在flexible一种适配方案。

<meta name="viewport" content="width=device-width, initial-scale=1" />

// 未加postcss-px2rem
.content {
	width: 750px;
	height: 75px;
}
// 加postcss-px2rem后，将在所有设备上都以这种方法展示
.content {
	width: 1rem;
	height: 0.1rem;
}

3 动态改变root的font-size

页面能在不同的设备上展示，这一步尤为重要！
flexible中有关于相关配置，不需要额外添加方法，核心代码大致如下（可根据个项目需求进行调整）：

// 根据屏幕宽度自动调整root的font-size
function refreshRem(){
      var width = docEl.getBoundingClientRect().width; // getBoundingClientRect可以获取页面的宽高
      // if (width / dpr > 540) {
      //     width = 540 * dpr; // 默认的适配最大宽度界限
      // }
      var rem = width / t; // t可以为任意值，例如1、10
      docEl.style.fontSize = rem + 'px'; // 设置根元素的fontsize，rem是基于根元素的fontsize来设定的
      flexible.rem = win.rem = rem;
  }

简单理解：
首先页面按照一套标准构建完成（即webpack.config.js文件中设置的remUnit），以750为例，若baseSize=750px。页面存在容器1，大小为100px*100px，转换成rem后，等价于0.133...rem*0.133...rem（理想情况是，在之后的不同设备中该容器始终为0.133...rem*0.133...rem）；
在不同的设备上加载时，以375为例，此时baseSize动态改变为375px，页面样式rem=>px调整后，容器1大小仍未0.133...rem*0.133...rem，等价于50px*50px。