使用 rem 和 px 函数适配各种屏幕
计算方法
由于我们的设计方案为16:9页面，所以判断屏幕宽高，以计算出页面宽高。
如果 屏幕宽度/屏幕高度 > 16/9， 那么页面宽度 = 屏幕高度 * （16/9），否则页面宽度 = 屏幕宽度
而页面高度就等于 页面宽度/ (16/19)
- 左右居中{margin:0 auto;}
- 上下居中: (屏幕高度 - 页面高度)/2
响应式页面不能使用像素问题
- 那就使用 rem
- 设置 html的font-size 为 页面宽度/100
const string = `<style>html{font-size: ${pageWidth/100}px}</style>` document.write(string)
//表示1rem的宽度
假设某 div 在设计稿中长 100px，设计稿宽度 1920px，
那么该 div 在页面中长为 100/1920 X 100rem
最后可以写一个 px() 函数来计算 100px 对应的 rem
@function px($n) {
@return $n / 2420 *100rem;
}
//2420为设计稿宽度
使用 grid 布局
main{
display: grid;
grid-template:
"box1 box2 box4 box5" 755fr
"box3 box3 box4 box5" 363fr / 366fr 361fr 811fr 747fr;
//表示各个分区的排列方法以及宽高布局
grid-column-gap: px(28);
//表示列之间的间隔宽度
grid-row-gap: px(28);
//表示行之间的间隔宽度
}
.section1 {
grid-area: box1;
}
.section2 {
grid-area: box2;
}
...
使用 echarts
引入方法可以根据 echarts文档使用
xAxis: {
axisTick: {show: false},//坐标轴刻度是否显示
axisLabel: { //坐标轴刻度标签
margin: px(8), //标签与轴的距离
lineHeight: px(15), //标签文本行间距
formatter(val) { //刻度标签的内容格式器,可以调用函数
if (val.length > 2) {
const array = val.split('');
array.splice(2, 0, '\n');
return array.join('');
} else {
return val;
}
}
},
}
饼图的使用
series: [
{
radius: ['75%', '90%'],
//内圈大小，外圈大小（只写一个数据就只有一个圈）
avoidLabelOverlap: false,//是否防止标签间的重叠。
label: {
show: true, position: 'inside', textStyle: {color: 'white', fontSize: px(20)}, //标签的位置大小颜色
edgeDistance: '10%', alignTo: 'edge',
//文字边距，但由于echarts设置问题，边距调到最小，标签也不能离饼图太近
formatter(options) {
return (options.value * 100).toFixed(0) + '%';
//.toFixed(0) 防止%数据过长问题
}
},
}
]
