一、用vw、vh 实现大屏自适应
- 视口单位中的“视口”，PC端指的是浏览器的可视区域。
- vw：1vw 等于视口宽度的 1%。若电脑屏幕分辨率为 1920px，则分成了100份 vw, 每个 vw 的 px 值 为 19.2px;
- vh：1vh等于视口高度的1%。若电脑屏幕分辨率为 1080px，则分成了100份 vh, 每个 vh 的 px 值 为 10.8px;
- 这样我们就可以通过设计稿上面的 px 值得到 vw, vh 的值。如果设计稿上的一个 div 高为 360px， 宽为 120px, 则我们可以在 样式中写为如下
div{
width: 360/19.2vw; // 计算得出具体值，保留两位小数
height: 120/10.8vh; // 计算得出具体值，保留两位小数
}
二、transform: scale(X) 大屏自适应
具体见大屏自适应二：https://www.jianshu.com/p/ef64cf3b29f4
- 如下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {margin: 0;padding: 0;}
#scaleContainer{
font-size: 36px;
transform-origin: 0 0;
position: absolute;
top: 50%;
left: 50%;
}
</style>
</head>
<body>
<div id="scaleContainer" class="scale-box" >
<p style="font-size: 58px;">我是css缩放的容器，放在我里面的元素。子孙元素，都会缩放。我再说一遍，要缩放的元素，只要放在我里面就可以！</p>
<div style="height: 850px;"></div>
footer
</div>
<script>
// 设计稿的宽度，这里我假设是1920px
var desginWidth = 1920;
var desginHeight = 920;
document.getElementById('scaleContainer').style.width = `${desginWidth}px`;
document.getElementById('scaleContainer').style.height = `${desginHeight}px`;
function setScale() {
// 这个是真实浏览器的宽度；手机上，电脑上，改变浏览器宽度都可以，就是最后浏览器展示内容的宽度
var trueWidth = window.innerWidth;
var trueHeight = window.innerHeight;
// 计算设计搞和真实展示宽度的，比例
var wScale = trueWidth / desginWidth;
var hScale = trueHeight / desginHeight;
var scale = Math.min(wScale, hScale);
document.getElementById('scaleContainer').style.transform = `scale(${scale}) translate(-50%, -50%)`;
}
window.addEventListener('resize', setScale);
setScale();
</script>
</body>
</html>
网友评论