如何用px 函数找到各种屏幕上显示的最佳位置
1、如果屏幕很宽,就左右居中
2、如果屏幕很高,就上下居中
总结起来就是:页面尽量居中,四周留白
Wp是页面有效宽度 Hp是页面有效高度
(在代码中就直接用if判断,如果设备宽/设备高大于16/9,那页面宽度就等于设备高度16/9 如果设备宽/设备高小于等于16/9,那页面宽度就等于设备的高度)*
还需要在head中设置1rem = Wp/10
如何将设计稿1:1还原在屏幕上
1、假设某个div在设计稿中的长度是10px,设计稿的宽度是1920px 那么该div在页面中的长度是 100/1920*100rem
2、写成一个px()函数来计算100px对应的rem
这就是为什么上文中设置了1rem = Wp/10
用flex布局还是Grid布局
因为我的设计稿是这样的:
所以整体分析之后打算用flex布局
上面的杭州市智慧交通综合平台做成了header
下面的部分全部划分为了main
main里面用space-around左右分成了left和right
left和right里面分别 display:column三个sections
剩下的中间车牌部分以及左上角的实时数据用绝对定位写上去
至于每个section里面都用disply:column布局
手把手教你使用E charts(提供在打包工具中使用的例子)
首先在package.json里查看有没有E charts包,没有就安装 我用的版本是 “5.0.2” 首先引用 echarts
import * as echarts from 'echarts';
第二步:用React ref 传递 E chart图表
用use effect 在组件第一次挂载的时候把ref传进来
const divRef = useRef(null);
useEffect(() => {
const myChart = echarts.init(divRef.current);
// 绘制图表
myChart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
},[])
这时候页面上已经出现了图表,但是一般情况会有一些显示不美观或者需要调整的地方
这时候建议大家打开E charts官方的术语速查手册
echarts.apache.org/zh/cheat-sh…
点进去对应的配置项就可以修改啦 (如果依然有解决不了的问题评论留言告诉我,我会帮忙的~)