利用rem实现自适应可视化大屏页面

元气少女Sherry酱

已于 2022-09-21 15:13:02 修改

阅读量791

点赞数

分类专栏： PC 文章标签：前端 css html

于 2022-09-13 15:46:29 首次发布

本文链接：https://blog.csdn.net/weixin_42599428/article/details/126834480

版权

1 篇文章 0 订阅

订阅专栏

众所周知，rem是根据根元素html的font-size来计算值的大小的，也就是说，我们只需要根据屏幕的宽高来自动设置html的font-size，并把所有px转换为rem就可以实现自适应功能

amfe-flexible：npm install amfe-flexible -S // 动态设置html里面的font-size
postcss-px2rem:npm install postcss-px2rem -S // 将CSS里面的px转化成rem

安装完毕后，在main.ts里面引入

import 'amfe-flexible';

新建一个.postcssrc.js 文件，设置相关的配置信息

"postcss-pxtorem-include": {
	include: 'src/*', // 制定转换的目录
	rootValue: 192, // 你的设计稿尺寸/10
	unitPrecision: 6, // 数值小数位数
	propList: ['*']
}

在这里插入图片描述

在某些情况下。例如行内元素及echarts等不是在style标签内的，需要进行手动配置

先写一个方法，根据设计稿的宽度来计算出对应的值，其实这里的转换方式跟rem的原理是一样的，都是用原本的值/设计稿的宽度

export const getSizeByScreen = (num: number) => {
	return Math.ceil((num / 1920) * window.screen.width) // 这里的1920对应设计稿的宽度
}

关注