界面的自适应方法

最新推荐文章于 2024-04-11 16:05:19 发布

沼跃鱼看穿一切

最新推荐文章于 2024-04-11 16:05:19 发布

阅读量555

点赞数

分类专栏： css 文章标签： css javascript

本文链接：https://blog.csdn.net/weixin_43799356/article/details/113183486

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.@media

@media (min-width: 1680px) {
    html{
        font-size: 32px;
    }
}
@media (min-width: 1600px) and (max-width: 1680px){
    html{
        font-size: 28px;
    }
}
@media (min-width: 1440px) and (max-width: 1600px){
    html{
        font-size: 26.67px;
    }
}

使用这种方式来规定根元素的字体在不同分辨率下的大小，规定元素尺寸时用rem可以做到自适应。
但是Chrome浏览器的最小字号就是12px，在实际中还会面临着各种各样的问题。
基本上使用的时候会去做各种尺寸的一些的微调。

2.css scale

首先是在css的部分：

#maindiv{
	min-width: auto;
	width: 1920px;
	min-height: auto;
	height: 1080px;   //    937px;
	transform-origin: 0 0;   //设置基点
	display: grid;
}

然后是js的部分：

if(document.documentElement.clientHeight>1010){
   document.getElementById("main").style.height=document.documentElement.clientHeight+"px";
   var heightsize=1;
   var widthsize=(document.documentElement.clientWidth/1920).toFixed(6);
   document.getElementById("main").style.transform='scale('+widthsize+','+heightsize+')';
}else{
   document.getElementById("main").style.height="937px";
   var heightsize1=(document.documentElement.clientHeight/937).toFixed(6);
   var widthsize1=(document.documentElement.clientWidth/1920).toFixed(6);
   document.getElementById("main").style.transform='scale('+widthsize1+','+heightsize1+')';
}
window.onresize = ()=>{
   if(document.documentElement.clientHeight>1010){
       document.getElementById("main").style.height=document.documentElement.clientHeight+"px";
       var heightsize=1;
       var widthsize=(document.documentElement.clientWidth/1920).toFixed(6);
       document.getElementById("main").style.transform='scale('+widthsize+','+heightsize+')';
   }else{
       document.getElementById("main").style.height="937px";
       var heightsize1=(document.documentElement.clientHeight/937).toFixed(6);
       var widthsize1=(document.documentElement.clientWidth/1920).toFixed(6);
       document.getElementById("main").style.transform='scale('+widthsize1+','+heightsize1+')';
    }
}

基本是就是判断当前的尺寸，然后根据这个尺寸比例进行调整。
第一行是为了配合全屏。
之所以不写1080，是因为我发现我另一台电脑的屏幕并不是1080的……看了看居然是1060的（%。？。%）
这个方案比起第一种来说，确实要方便不少。
但是某些情况下，还是需要去刷新才能自适应。
比如，如果你的页面中引用了一些别人的东西，别人把检测尺寸变化给关掉了。
还有就是如果尺寸不合适，会出现变形导致违和感。

然而最后还是用了第二种，确实方便不少。

（菜鸟一枚，欢迎指正。（%^-^%））