如何适配屏幕
- 算法：
image.png
上图中如果设备的宽度/设备的高度 > 16/9，Wp 就等于 设备高度 * 16/9 ，否则如果小于等于 16/9 的话，就等于设备宽度。
Wp 为页面有效宽度，Hp 为页面有效高度
页面左右居中，上下居中，四周留白即可
然后在 head 里用 JS 设置 1rem = Wp / 100（下文中会用到）
-
用 rem
假设某 div 在设计稿中长 100px，设计稿宽度 1920px，
那么该 div 在页面中长为 100/1920 X 100rem
最后可以写一个 px() 函数来计算 100px 对应的 rem
实战
1. 适配
在 html 里根据上面的公式设置基础 font-size
<script>
const 设备宽度 = document.documentElement.clientWidth
const 设备高度 = document.documentElement.clientHeight
let 页面宽度
if (设备宽度 / 设备高度 > 16/9) {
页面宽度 = 设备高度 * (16/9)
} else {
页面宽度 = 设备宽度
}
const 页面高度 = 页面宽度 / (16 /9)
const string = `<style>
html {
font-size: ${pageWidth / 100}px
}
</style>`
document.write(string)
</script>
<div id="root"></div>
<script>
root.style.width = 页面宽度 + 'px';
root.style.height = 页面高度 + 'px';
root.style.marginTop = (设备高度 - 页面高度) / 2 + 'px'
</script>
将上面的中文替换成英文
<script>
const clientWidth = document.documentElement.clientWidth;
const clientHeight = document.documentElement.clientHeight;
const pageWidth = (clientWidth / clientHeight > 16/9) ? clientHeight * (16/9) : clientWidth;
const pageHeight = pageWidth / (16 /9);
const string = `<style>
html {
font-size: ${pageWidth / 100}px
}
</style>`
document.write(string)
</script>
<div id="root"></div>
<script>
root.style.width = pageWidth + 'px';
root.style.height = pageHeight + 'px';
root.style.marginTop = (clientHeight - pageHeight) / 2 + 'px'
</script>
2. 将 px 替换成 rem
这里我们设计稿的宽度是 2420
- helper.scss
@function px($n) {
@return $n / 2420 * 100rem;
}
- demo.scss
@import "../shared/helper";
.x {
width: px(367);
height: px(315);
border: 1px solid red;
}
3. 使用 echarts
import * as echarts from 'echarts';
export const Home = () => {
const divRef = useRef(null)
useEffect(() => {
let myChart = echarts.init(divRef.current);
myChart.setOption({
xAxis:{
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
axisLabel: {
fontSize: 6 // 设置x轴字体大小（默认单位px）
}
},
yAxis:{
splitLine: {show: false},
axisLabel: {
fontSize: 6
}
},
grid: { // 设置图表的 padding 填充值
x: 20,
y: 20,
x2: 20,
y2: 20
},
series: [{
type: 'bar',
data: [10, 20, 30, 40, 50]
}]
})
}, [])
return (
<div className="chart" ref={divRef} />
)
}
，又因为我们在 echarts 里是以 px 为单位，所以不能写成 rem，我们需要把 100rem 换成页面真实的宽度 pageWidth
const px = (n) => n / 2420 * (window as any).pageWidth;
useEffect(() => {
let myChart = echarts.init(divRef.current);
myChart.setOption({
textStyle: {
fontSize: px(12),
color: '#79839E'
},
xAxis:{
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
axisLabel: {
fontSize: px(12)
}
},
yAxis:{
splitLine: {show: false},
axisLabel: {
fontSize: px(12)
}
},
grid: {
x: px(40),
y: px(40),
x2: px(40),
y2: px(40)
},
series: [{
type: 'bar',
data: [10, 20, 30, 40, 50]
}]
})
}, [])
