簡(jiǎn)介
前端中大屏往往用于展示各種炫酷的界面和特效，因此特別受用好歡迎。
但是在開發(fā)過程中，常常也會(huì)出現(xiàn)各種問題，與一般的頁面相比，
最讓人頭疼的是大屏的自適應(yīng)問題。
使用CSS中transform屬性和js獲取縮放比例方法
先簡(jiǎn)單寫一下網(wǎng)頁，先畫一個(gè)大盒子container，再畫自適應(yīng)大屏盒子box，
再box中就是我們測(cè)試的兩個(gè)小盒子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<!-- 數(shù)據(jù)展示的區(qū)域 -->
<div class="box">
<div class="top">我是top部分，2035年實(shí)現(xiàn)基本社會(huì)主義現(xiàn)代化</div>
<div class="bottom">我是bottom部分，
2050年實(shí)現(xiàn)第二個(gè)一百年奮斗目標(biāo)，全面建成富強(qiáng)民主文明和諧美麗的社會(huì)主義現(xiàn)代化強(qiáng)國(guó)</div>
</div>
</div>
</body>
</html>
接著我們開始寫css部分，主要用到vw和vh這兩個(gè)屬性單位和transform屬性
* {
margin: 0;
padding: 0;
}
/* 大屏盒子box 使用fixed定位，將屏幕的尺寸設(shè)置為寬高 并通過 transform-origin: left top將變換的基點(diǎn)設(shè)置為屏幕左上角*/
.container {
width: 100vw;
height: 100vh;
background: url(./bg.png) no-repeat;
background-size: cover;
}
.box {
position: fixed;
width: 1920px;
height: 1080px;
background: red;
transform-origin: left top;
left: 50%;
top: 50%;
}
.top {
width: 100px;
height: 100px;
background: hotpink;
margin-left: 50px;
}
.bottom {
width: 100px;
height: 100px;
background: skyblue;
margin-left: 50px;
margin-top: 100px;
}
接著寫js，通過resize控制屏幕尺寸大小
//控制數(shù)據(jù)大屏放大與縮小
let box = document.querySelector('.box');
box.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
//計(jì)算縮放的比例啦
function getScale(w = 1920, h = 1080) {
const ww = window.innerWidth / w;
const wh = window.innerHeight / h;
return ww < wh ? ww : wh;
//ww<wh情況: 1920/1920(ww) 1080/1080(wh)
//ww>wh情況:1920/1920(ww) 1080/1080(wh)
}
// 防抖
window.onresize = () => {
box.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
}
注意
同時(shí)還可以寫防抖和多媒體查詢使得屏幕縮放更加自如、
文章來源地址http://www.zghlxwxcb.cn/news/detail-636347.html
文章來源：http://www.zghlxwxcb.cn/news/detail-636347.html
到了這里，關(guān)于前端大屏自適應(yīng)縮放的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
