前端中大屏往往用于展示各种炫酷的界面和特效，因此特别受用好欢迎。
但是在开发过程中，常常也会出现各种问题，与一般的页面相比，
最让人头疼的是大屏的自适应问题。
先简单写一下网页，先画一个大盒子container，再画自适应大屏盒子box，
再box中就是我们测试的两个小盒子。
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metahttp-equiv = " X-UA-Compatible" content = " IE=edge" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> </ head> < body> < divclass = " container" > < divclass = " box" > < divclass = " top" > </ div> < divclass = " bottom" > </ div> </ div> </ div> </ body> </ html> 接着我们开始写css部分，主要用到vw和vh这两个属性单位和transform属性
* { margin : 0; padding : 0; } .container { width : 100vw; height : 100vh; background : url ( ./bg.png) ; 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; }
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; } window. onresize = ( ) => { box. style. transform = ` scale( ${ getScale ( ) } ) translate(-50%,-50%) ` }
同时还可以写防抖和多媒体查询使得屏幕缩放更加自如、
