CSS使网页适应不同屏幕大小（最实用的rem基础屏幕的适配方案）

素颜马尾好姑娘i 2022-12-27 09:25 265阅读 0赞

## 先看代码，复制使用即可，以下代码均可复制粘贴使用（我将以注释的形式解释代码左右）。 ##

##### 如您满意请给莫成尘点个Fabulous #####

#### 牛顿说过：我之所以看得远,是因为我站在巨人的肩膀上，我们充分借鉴了element，antd等的方案来适配。 ####

###  需 要 注 意 的 是 使 用 了 这 个 方 案 ， 您 最 好 使 用 r e m 作 为 单 位 来 设 置 c s s ， \\color\{\#FF0000\}\{需要注意的是使用了这个方案，您最好使用rem作为单位来设置css，\} 需要注意的是使用了这个方案，您最好使用rem作为单位来设置css， 如 果 觉 得 自 己 计 算 比 较 麻 烦 ， 可 以 使 用 您 的 编 译 器 设 置 \\color\{\#FF0000\}\{如果觉得自己计算比较麻烦，可以使用您的编译器设置\} 如果觉得自己计算比较麻烦，可以使用您的编译器设置 也 可 以 在 蓝 湖 中 指 定 宽 度 为 120 如 下 图 片 \\color\{\#FF0000\}\{也可以在蓝湖中指定宽度为120 如下图片\} 也可以在蓝湖中指定宽度为120如下图片 ###

![蓝湖设计][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzgyMTI4MQ_size_16_color_FFFFFF_t_70_pic_center]

<!DOCTYPE html>
    <html lang="zh">
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    		<meta http-equiv="X-UA-Compatible" content="ie=edge">
    		<title></title>
    	</head>
    	<body>
    
    	</body>
    	<script type="text/javascript" charset="utf-8">
    		//element 24栅栏布局是将页面等分为24份
    		(function rem() { 
    			let fonts = document.documentElement.clientWidth / 120
    			//我们获取到document.documentElement.clientWidth 即当前浏览器宽度 等分为120份
    			// 一份的大小 在1440屏幕下 为12px， 在1920屏幕下 为16px
    			if (fonts <= 12) { 
    				fonts = 12;
    				document.documentElement.style.fontSize = fonts + "px"
    				//当字体小于12 即1440 屏幕以下 我们让其为12
    				document.documentElement.style.minWidth = '1440px'
    				//同时设置屏幕的最小宽度为1440px
    			} else if (fonts > 12 && fonts <= 16) { 
    				//如果在12--16之间 我们认为 此时屏幕宽度为 1440-1920之间 就可以使用
    				document.documentElement.style.fontSize = document.documentElement.clientWidth / 120 + 'px';
    			}
    			window.onresize = rem;
    			//window的窗口发生变化时 执行rem 函数 
    			// 想必您已经知道了 我们在设置css 的单位时 将使用 rem
    			// 比如 设计图 1920下 为100px 那么此时的单位应该为 6.25rem
    		})()
    	</script>
    	 <script type="text/javascript">
    		 //以下代码监听dom框架加载完成 做了一些常用处理
    	  	document.addEventListener('DOMContentLoaded', function (event) { 
    	  	            //chrome浏览器
    	  	            document.body.style.zoom = 'reset';
    	  	            document.addEventListener('keydown', function (e) { 
    	  	                if ((e.ctrlKey === true || e.metaKey === true) &&
    	  	                    (e.which === 61 || e.which === 107 || e.which === 173 || e.which === 109
    	  	                        || e.which === 187 || e.which === 189)) { 
    	  	                    e.preventDefault();
    	  	                }
    	  	            }, false);
    	  	            document.addEventListener('mousewhell DOMMouseScroll', function (e) { 
    	  	                if (e.ctrlKey === true || e.metaKey === true) { 
    	  	                    e.preventDefault();
    	  	                }
    	  	            }, false);
    	  	        }, false);
    	  </script>
    </html>

#### 附加和可能出现的有用信息已添加注释 ####

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzgyMTI4MQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/17398401a3714a8fb76af3abb5a2aaad.png