前端页面在PC端不同分辨率屏幕的适配

您所在的位置：网站首页 › 网页设计屏幕尺寸 › 前端页面在PC端不同分辨率屏幕的适配

前端页面在PC端不同分辨率屏幕的适配

2023-11-06 10:14| 来源: 网络整理| 查看: 265

通常UI提供PC端项目的设计稿尺寸都是1920*1080(16:9)的，但是电脑显示屏的分辨率是不固定的，所以按照这个固定像素做出来的前端页面在不同的显示屏上可能会出现页面显示不全或者是页面无法充满屏幕的情况。此时，“人美心善”的客户就会提出要求，要让页面充满屏幕。

--我常用的解决方法——比例缩放

上代码：

css

body{ transform: scale(1,1); -ms-transform: scale(1,1); /* IE 9 */ -webkit-transform: scale(1,1); /* Safari and Chrome */ transform-origin: left top; /*设置左上角为缩放原点*/ }

selfAdaption(){ this.windowHeight = document.documentElement.clientHeight this.windowWidth = document.documentElement.clientWidth let heightScale = this.windowHeight/1080 let widthScale = this.windowWidth/1920 $('body').css({ "transform": `scale(${widthScale},${heightScale})`, "-ms-transform": `scale(${widthScale},${heightScale})`, "-webkit-transform": `scale(${widthScale},${heightScale})`, }) window.onresize = () => { //屏幕尺寸改变时触发 this.windowHeight = document.documentElement.clientHeight this.windowWidth = document.documentElement.clientWidth let heightScale = this.windowHeight / 1080 let widthScale = this.windowWidth / 1920 $('body').css({ "transform": `scale(${widthScale},${heightScale})`, "-ms-transform": `scale(${widthScale},${heightScale})`, "-webkit-transform": `scale(${widthScale},${heightScale})`, }) } }, 优点 1、此方法是通过在body标签上添加transform：scale（）样式实现的，所以页面的所有元素都会被缩放。 2、复杂程度相较于rem的方式更简便，只需考虑body标签的宽高即可缺点 1、用此方法实现适配的页面在浏览器不能通过ctrl+滚轮缩放页面 2、如果屏幕实际的像素比与设计稿的像素比差别过大，页面会也会被拉伸的比较奇怪

【本文地址】

前端页面在PC端不同分辨率屏幕的适配

前端页面在PC端不同分辨率屏幕的适配

今日新闻

推荐新闻