HTML页面布局适配不同分辨率

HTML页面布局适配不同分辨率 2022-10-21 752

一、使用JS控制与元素长度和高度

//页面加载时执行
 window.onload = function () {
          
     
 		 //根据元素ID获取html元素
        var element_obj = document.getElementById("wrapper"); 
         //获取屏幕的高度
        var heigth_screen = window.screen.height;  
         //获取屏幕的宽度
        var width_screen = window.screen.width; 
         //通过系数调整元素所需的高度和宽度，将调整好的高度和宽度赋值给html元素
            heigth_screen = heigth_screen * 1;
        element_obj.style.height = heigth_screen + "px";
        width_screen = width_screen * 1;
        element_obj.style.width = width_screen + "px";
    };

注意： 1. js会在css后执行，html页面打开时可能会先出现css控制的样式，随后执行js后改变为js控制的样式。 2. 只需在html最外层自建元素使用此js控制屏幕布局适配，无需为每个元素使用此js。 3. 最外层元素的内部元素使用px为单位设置高度不会影响此js。 4. 浏览器及其版本兼容性不确定，仅供参考学习。知识点: 1. window.onload与window.ready区别。 2. 如何获取屏幕、浏览器…的高度和宽度…。 3. 如何使用框架的语法替换原生js语法。 4. css单位是如何计算生成的。 5. 如何获取元素ID。 6. 了解rem、em 或者vw、vh为单位进行布局。