目录看这里😊
- 方法：postcss-pxtorem结合amfe-flexible
- 介绍
- amfe-flexible
- amfe-flexiable.js的源码
- postcss-pxtorem
- 注意事项
- 2. 使用
- 2.1 在main.js入口文件引入
- 2.2 创建postcss.config.js配置文件
- 大屏改进方案
- scale
- 1. 如何缩放
- 2. 如何居中
- 偷懒方法-插件
- 图表适配
- 思路
- 其他方法
方法：postcss-pxtorem结合amfe-flexible
介绍
amfe-flexible
amfe-flexible 是一个由阿里巴巴前端团队开发的 JavaScript 库，用于实现移动端页面的自适应布局。
它通过动态设置 HTML 根元素的 font-size 来根据屏幕宽度进行适配。这个库是 lib-flexible 的升级版本。
简言之：
- amfe-flexible会自动将html的font-size设置为屏幕宽度clientWidth的1/10，将body的font-size设置为12 * dpr 像素（一般为24px），单位为px。
- 动态监听resize事件，调整html/body的fontsize
下图可以看到，在main.js中引入amfe-flexible，为自动在html和body上设置行内样式 font-size
下图可以看到，pc端调整屏幕大小resize时，html的font-size会根据屏幕宽度自动变更，大小始终为屏幕宽度clientWidth的1/10
amfe-flexiable.js的源码
// 以2.2.1版本为例
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
postcss-pxtorem
ostCSS 插件，它用于将 CSS 中的像素单位（px）转换为 rem 单位。这个插件对于创建响应式设计特别有用，因为它允许开发者使用 px 单位编写样式，然后在构建过程中自动转换成相对单位 rem，这样可以更方便地通过改变根元素（html）的字体大小来调整整个页面的布局尺寸(使得再写css时，可以依据设计图直接使用px作为单位，编译时插件自动将单位由px转为rem)
注意事项
- 不能使用行内样式
对于行内样式，阿里手淘并不能将px转rem，所以对于需要自适应的样式，如font-size、width、height等请不要写在行内。同理，对于不需要转化的样式可以写在行内，或者使用PX（大写）作为单位。 - 字号不使用rem
我们都知道chrome的最小显示的字体是12px，如果字体用rem，计算出来小于12px，那么就也会以12px显示，而且我们不希望出现13px或者15px这样的奇葩尺寸，所以字体最好是用PX（大写）来表示，至于适应，我们可以写媒体查询。
.item {
border-bottom: 1PX #8d8d8d dashed;
font-size: 12PX;
line-height: 16PX;
@media screen and (min-width: 576PX) {
font-size: 14PX;
line-height: 18PX;
}
@media screen and (min-width: 768PX) {
font-size: 16PX;
line-height: 28PX;
}
@media screen and (min-width: 992PX) {
font-size: 16PX;
line-height: 32PX;
}
@media screen and (min-width: 1200PX) {
font-size: 18PX;
line-height: 64PX;
}
}
// PC端响应式媒体断点：
```css
@media (min-width: 1024px){
body{font-size: 18px}
}
@media (min-width: 1100px) {
body{font-size: 20px}
}
@media (min-width: 1280px) {
body{font-size: 22px;}
}
@media (min-width: 1366px) {
body{font-size: 24px;}
}
@media (min-width: 1440px) {
body{font-size: 25px !important;}
}
@media (min-width: 1680px) {
body{font-size: 28px;}
}
@media (min-width: 1920px) {
body{font-size: 33px;}
}
### amfe-flexible不是已经给html自动设置了font-size，为什么还需要它通过pxtorem设置rootValue
+ pxtorem是将代码中的px转为rem，转换比例就是根据rootValue来计算的（1rem = rootValue的值+‘px’）
这样可以根据设计图量的的尺寸px，直接写到代码中，而不需要计算并手动折算成rem。比如设计图宽度是750px，那么rootValue=75，即按照75px=1rem，在编译的时候，将px转为rem单位，保证尺寸大小是个相对值
+ 渲染到页面上时，需要再将编译后的rem值转为px，这时候的转换比例就是1rem = 实际展示容器html的font-size值。amfe-flexible就是用来动态设置这个基准值的（ 如果屏幕大小固定，其实就不需要amfe-flexible，手动设置html的font-size值就行了。但前端渲染的屏幕尺寸不同，因此需要根据屏幕尺寸大小动态的调整基准值。）
+ 简言之：pxtorem是方便我们"按照相对值复刻"设计图上的尺寸，即把px绝对值转为相对值rem（转换比例就是rootValue），保证比例不失真，渲染时需要再将相对值rem转为绝对值px（转换比例就是amfe-flexible自动设置的html的font-size）
## 安装和使用
### 1. 安装
```js
npm install amfe-flexible --save
npm install postcss-pxtorem --save-dev
2. 使用
2.1 在main.js入口文件引入
import 'amfe-flexible'
2.2 创建postcss.config.js配置文件
可在
vue.config.js、.postcssrc.js、postcss.config.js其中之一配置，权重从左到右降低，没有则新建文件，只需要设置其中一个即可。
module.exports = {
plugins:{
autoprefixer:{}
//f1exible配置
'postcss-pxtorem': {
rootVa1ue: 75, //设计稿宽度的1/10
propList: ["*"], //需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
//selectorBlackList: ['van-'], // 忽略的选择器
//replace: true, // 直接替换原来的单位，不添加备选单位
//mediaQuery: false, // 是否在媒体查询中转换 px
//minPixelValue: 2, // 最小的转换数值
}
},
},
注意点：
- rootValue根据设计稿宽度除以10进行设置，这边假设设计稿为375，即rootValuei设为37.5:
- propList是设置需要转换的属性，这边*为所有都进行转换。
补充报错：
如果出现报错，请降低版本后重装依赖 ( 在package.json文件中将版本修改为如下，然后终端运行命令npm install即可 )
"dependencies":{
"amfe-flexible":"^2.2.1",
"postcss-pxtorem":"^5.1.1",
},
function setRem() {
// 获取视口宽度
const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
// 设置最小宽度，防止字体大小过小
const minWidth = 320;
if (htmlWidth < minWidth) {
htmlWidth = minWidth;
}
// 获取 html 元素
const htmlDom = document.getElementsByTagName('html')[0];
// 设置 html 元素的 font-size
htmlDom.style.fontSize = (htmlWidth / 10) + 'px';
}
// 初始化时调用 setRem 函数
setRem();
// 监听窗口大小变化
let resizeTimeout;
window.addEventListener('resize', () => {
// 使用 requestAnimationFrame 来减少频繁的计算
if (resizeTimeout) {
clearTimeout(resizeTimeout);
}
resizeTimeout = setTimeout(() => {
setRem();
}, 100); // 延迟 100 毫秒执行，避免频繁触发
});
大屏改进方案
- 限制rem的最大值
- 通过媒体查询，限制内容最大宽度
- 图片使用SVG 和 Icon Font：使用 SVG 和 Icon Font 可以保证图标和图形在不同分辨率下的清晰度，避免位图在大屏上的失真问题。
scale
通过 css 的 scale 属性，根据屏幕大小，对图表进行整体的等比缩放，从而达到自适应效果
- 缺点： 在任意屏幕下保持固定比例，上下/左右会留白
- 优化办法：对内容剧中，保证左右留白大小一致，在父容器中，设置背景颜色，从而"实现"全屏展示
1. 如何缩放
当屏幕宽高比 < 设计稿宽高比，我们需要缩放的比例是屏幕宽度 / 设计稿宽度当屏幕宽高比 > 设计稿宽高比，我们需要缩放的比例是屏幕高度 / 设计稿高度
const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftHeight ?
(document.documentElement.clientWidth / designDraftWidth) :
(document.documentElement.clientHeight / designDraftHeight);
如果我们拿到的设计稿宽高为: 1920 * 960 px ，而我们的屏幕大小是 1440 * 900 px，那么 1440/900 = 1.6，920/960 = 2
因为 1.6 < 2 （当前屏幕宽高比小于设计稿宽高比）
所以我们需要缩放的比例是：屏幕宽度除以设计稿宽度 = 1440/1920 = 0.75
2. 如何居中
首先我们利用 transform:translate(-50%,-50%) ，将动画的基点设为左上角
transform-origin：设置动画的基点(中心点)，默认点是元素的中心点
//语法
transform-origin: x-axis y-axis z-axis;
然后利用transform:translate(-50%,-50%)，将图表沿 x，y 轴移动 50%
接下来利用绝对定位将图表定位到中间位置
position: absolute;
left: 50%;
top: 50%;
偷懒方法-插件
v-scale-screen是使用 css 属性 transform 实现缩放效果的一个大屏自适应组件，通过 scale 进行等比例计算，达到等比例缩放的效果，同时也支持铺满全屏，宽度等比，高度等比，等自适应方案,具体可查大屏自适应终极解决方案
图表适配
思路
- 首先容器盒子大小要使用相对值，比如%、vh、vm
- 默认情况下，这里以你的设计稿是 1920*1080 为例，即网页宽度是 1920px (做之前一定问清楚 ui 设计稿的尺寸）
- 把这个函数写在一个单独的工具文件dataUtil.js里面，在需要的时候调用
- 其原理是计算出当前屏幕宽度和默认设计宽度的比值，将原始的尺寸乘以该值
- 另外，其它 echarts 的配置项，比如间距、定位、边距也可以用该函数
- 编写 dataUtil.js 工具函数
export const fitChartSize = (size,defalteWidth = 1920) => {
let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
if (!clientWidth) return size;
let scale = (clientWidth / defalteWidth);
return Number((size*scale).toFixed(3));
- 将函数挂载到vue原型上
import {fitChartSize} from '@src/utils/dataUtil.js'
Vue.prototype.fitChartFont = fitChartSize;
- 使用fitChartFont调整echar中的尺寸大小
有两种方法：
1. echart的option中涉及到尺寸大小的，均调用fitChartFont方法，转换一下尺寸
2. option中还是使用绝对数值px，另外封装一个处理option的方法（绝对值转为相对值），好处是可以批量处理，坏处是每次监听resize时，都需要先调用该方法，再执行echart.resize()
方法1：
<template>
<div class="chartsdom" ref="chart" v-chart-resize></div>
</template>
<script>
export default {
name: "dashboardChart",
data() {
return {
option: null,
};
},
mounted() {
this.getEchart();
},
methods: {
getEchart() {
let myChart = this.$echarts.init(this.$refs.chart);
const option = {
backgroundColor: "transparent",
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c}%",
},
grid: {
left: this.fitChartSize(10),
right: this.fitChartSize(20),
top: this.fitChartSize(20),
bottom: this.fitChartSize(10),
containLabel: true,
},
calculable: true,
series: [
{
color: ["#0db1cdcc"],
name: "计划投入",
type: "funnel",
width: "45%",
height: "70%",
x: "5%",
minSize: "10%",
funnelAlign: "right",
center: ["50%", "50%"], // for pie
data: [
{
value: 30,
name: "下单30%",
},
{
value: 55,
name: "咨询55%",
},
{
value: 65,
name: "点击65%",
},
{
value: 60,
name: "访问62%",
},
{
value: 80,
name: "展现80%",
},
].sort(function (a, b) {
return a.value - b.value;
}),
roseType: true,
label: {
normal: {
formatter: function () {},
position: "inside",
},
},
itemStyle: {
normal: {
borderWidth: 0,
shadowBlur: this.fitChartSize(20),
shadowOffsetX: 0,
shadowOffsetY: this.fitChartSize(5),
shadowColor: "rgba(0, 0, 0, 0.3)",
},
},
},
{
color: ["#0C66FF"],
name: "实际投入",
type: "funnel",
width: "45%",
height: "70%",
x: "50%",
minSize: "10%",
funnelAlign: "left",
center: ["50%", "50%"], // for pie
data: [
{
value: 35,
name: "下单35%",
},
{
value: 40,
name: "咨询40%",
},
{
value: 70,
name: "访问70%",
},
{
value: 90,
name: "点击90%",
},
{
value: 95,
name: "展现95%",
},
].sort(function (a, b) {
return a.value - b.value;
}),
roseType: true,
label: {
normal: {
position: "inside",
},
},
itemStyle: {
normal: {
borderWidth: 0,
shadowBlur: this.fitChartSize(20),
shadowOffsetX: 0,
shadowOffsetY: this.fitChartSize(5),
shadowColor: "rgba(0, 0, 0, 0.3)",
},
},
},
],
};
myChart.setOption(option, true);
// 监听窗口大小变化，重新应用适配
window.addEventListener('resize', () => {
myChart.setOption(option);
myChart.resize(); // 重新布局图表
});
},
beforeDestroy() {},
};
</script>
<style lang="scss" scoped>
.chartsdom {
width: 100%;
height: 100%;
}
</style>
方法2：
// 假设你已经初始化了一个 ECharts 实例
const myChart = echarts.init(document.getElementById('main'));
// 定义默认的配置项
const option = {
title: {
text: '示例图表',
left: 'center',
top: 20,
textStyle: {
fontSize: 18, // 默认字体大小
}
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
interval: 0,
rotate: 30,
margin: 15, // 默认间距
fontSize: 12, // 默认字体大小
}
},
yAxis: {
type: 'value',
axisLabel: {
fontSize: 12, // 默认字体大小
}
},
series: [{
name: '销量',
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}]
};
// 应用 fitChartSize 函数调整字体大小和间距
function applyFitChartSize(option) {
const defalteWidth = 1920;
// 调整标题字体大小
if (option.title && option.title.textStyle) {
option.title.textStyle.fontSize = fitChartSize(option.title.textStyle.fontSize, defalteWidth);
}
// 调整 x 轴标签字体大小和间距
if (option.xAxis && option.xAxis.axisLabel) {
option.xAxis.axisLabel.fontSize = fitChartSize(option.xAxis.axisLabel.fontSize, defalteWidth);
option.xAxis.axisLabel.margin = fitChartSize(option.xAxis.axisLabel.margin, defalteWidth);
}
// 调整 y 轴标签字体大小
if (option.yAxis && option.yAxis.axisLabel) {
option.yAxis.axisLabel.fontSize = fitChartSize(option.yAxis.axisLabel.fontSize, defalteWidth);
}
// 其他需要调整的部分...
}
// 在设置选项之前应用适配
applyFitChartSize(option);
// 设置 ECharts 选项
myChart.setOption(option);
// 监听窗口大小变化，重新应用适配
window.addEventListener('resize', () => {
applyFitChartSize(option);
myChart.setOption(option);
myChart.resize(); // 重新布局图表
});
