标签：style main 界面 documentElement 适应 getElementById var document 方法

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的（%。？。%）
这个方案比起第一种来说，确实要方便不少。
但是某些情况下，还是需要去刷新才能自适应。
比如，如果你的页面中引用了一些别人的东西，别人把检测尺寸变化给关掉了。
还有就是如果尺寸不合适，会出现变形导致违和感。

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

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

标签：style,main,界面,documentElement,适应,getElementById,var,document,方法
来源： https://blog.csdn.net/weixin_43799356/article/details/113183486

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。