漂亮的设计类图片网站,外贸商城网站系统,wordpress 主题添加标签,重庆工程建设招标网官方网站简介
前端中大屏往往用于展示各种炫酷的界面和特效#xff0c;因此特别受用好欢迎。
但是在开发过程中#xff0c;常常也会出现各种问题#xff0c;与一般的页面相比#xff0c;
最让人头疼的是大屏的自适应问题。使用CSS中transform属性和js获取缩放比例方法 先简单写一下…简介
前端中大屏往往用于展示各种炫酷的界面和特效因此特别受用好欢迎。
但是在开发过程中常常也会出现各种问题与一般的页面相比
最让人头疼的是大屏的自适应问题。使用CSS中transform属性和js获取缩放比例方法 先简单写一下网页先画一个大盒子container再画自适应大屏盒子box
再box中就是我们测试的两个小盒子。!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv classcontainer!-- 数据展示的区域 --div classboxdiv classtop我是top部分2035年实现基本社会主义现代化/divdiv classbottom我是bottom部分
2050年实现第二个一百年奋斗目标全面建成富强民主文明和谐美丽的社会主义现代化强国/div/div/div
/body
/html接着我们开始写css部分主要用到vw和vh这两个属性单位和transform属性* {margin: 0;padding: 0;}/* 大屏盒子box 使用fixed定位将屏幕的尺寸设置为宽高 并通过 transform-origin: left top将变换的基点设置为屏幕左上角*/.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控制屏幕尺寸大小 //控制数据大屏放大与缩小let box document.querySelector(.box);box.style.transform scale(${getScale()}) translate(-50%,-50%)//计算缩放的比例啦function getScale(w 1920, h 1080) {const ww window.innerWidth / w;const wh window.innerHeight / h;return ww wh ? ww : wh;//wwwh情况: 1920/1920(ww) 1080/1080(wh)//wwwh情况:1920/1920(ww) 1080/1080(wh)}// 防抖window.onresize () {box.style.transform scale(${getScale()}) translate(-50%,-50%)}注意
同时还可以写防抖和多媒体查询使得屏幕缩放更加自如、
