一、用vw、vh 實(shí)現(xiàn)大屏自適應(yīng)
- 視口單位中的“視口”，PC端指的是瀏覽器的可視區(qū)域。
- vw：1vw 等于視口寬度的 1%。若電腦屏幕分辨率為 1920px，則分成了100份 vw, 每個 vw 的 px 值 為 19.2px;
- vh：1vh等于視口高度的1%。若電腦屏幕分辨率為 1080px，則分成了100份 vh, 每個 vh 的 px 值 為 10.8px;
- 這樣我們就可以通過設(shè)計稿上面的 px 值得到 vw, vh 的值。如果設(shè)計稿上的一個 div 高為 360px， 寬為 120px, 則我們可以在 樣式中寫為如下
div{
width: 360/19.2vw; // 計算得出具體值，保留兩位小數(shù)
height: 120/10.8vh; // 計算得出具體值，保留兩位小數(shù)
}
二、transform: scale(X) 大屏自適應(yīng)
具體見大屏自適應(yīng)二：http://www.itdecent.cn/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>
// 設(shè)計稿的寬度，這里我假設(shè)是1920px
var desginWidth = 1920;
var desginHeight = 920;
document.getElementById('scaleContainer').style.width = `${desginWidth}px`;
document.getElementById('scaleContainer').style.height = `${desginHeight}px`;
function setScale() {
// 這個是真實(shí)瀏覽器的寬度；手機(jī)上，電腦上，改變?yōu)g覽器寬度都可以，就是最后瀏覽器展示內(nèi)容的寬度
var trueWidth = window.innerWidth;
var trueHeight = window.innerHeight;
// 計算設(shè)計搞和真實(shí)展示寬度的，比例
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>
