如何适配屏幕
设计稿如上所示，他的宽高是固定的，而用户实际的屏幕宽高可能与设计稿并不一致，如何在用户屏幕宽高不一致的情况下始终使显示的内容能够按照设计稿的比例来进行缩放，可以按照以下公式来进行设置（这里以16/9为例）：
- Wp 为页面有效宽度，Hp 为页面有效高度
- 页面左右居中，上下居中，四周留白即可
- 然后在 head 里用 JS 设置 1rem = Wp / 100（下文中会用到）
这一块的设置在index.html中进行，代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!DOCTYPE html>
<html lang="zh">
<head>
<script>
const cWidth = document.documentElement.clientWidth;
const cHeight = document.documentElement.clientHeight;
let pWidth;
if (cWidth / cHeight > 16 / 9) {
pWidth = (cHeight * 16) / 9;
} else {
pWidth = cWidth;
}
const pHeight = (pWidth * 9) / 16;
console.log(pWidth, pHeight);
const string = `<style> html{
font-size:${pWidth / 100}px;
} </style>`;
document.write(string);
</script>
</head>
<body>
<div id="root"></div>
<script>
root.style.width = pWidth + 'px';
root.style.height = pHeight + 'px';
root.style.marginTop = cHeight / 2 - pHeight / 2 + 'px';
</script>
</body>
</html>
|
使用rem作为单位
对于设计稿内具体组成的实现，为了保持比例可以使用rem实现，公式如下：
假设某 div 在设计稿中长 100px，设计稿宽度 1920px，
那么该 div 在页面中长为 100/1920 X 100rem
最后可以写一个 px() 函数来计算 100px 对应的 rem
参考资料
基于等比缩放的大屏自适应方案 - 掘金 (juejin.cn)