CSSは、Webページをさまざまな画面サイズに適応させます（最も実用的なremの基本的な画面適応スキーム）

最初にコードを見て、コピーして使用するだけです。次のコードをコピーして貼り付けることができます（コードをコメントの形で説明します）。

あなたが満足しているなら、MoChengchenに素晴らしいものを与えてください

ニュートンは言った：私が遠くを見る理由は、私が巨人の肩の上に立っているからであり、私たちは適応するために要素、antdおよび他の解決策を完全に借りてきました。

$このスキームを使用すると、cssを設定する単位としてremを使用する方がよいことに注意してください。\ color {＃FF0000} {このスキームを使用する場合は、cssを設定する単位としてremを使用する方がよいことに注意してください。、}$ $彼らは彼らの計算が面倒であると感じた場合コンパイラ設定を使用できます\ color {＃FF0000} {計算が面倒だと思われる場合は、コンパイラ設定を使用できます}$ $画像\カラー{＃FF0000は} {も青色で指定するようにブルーレーキ120の幅を指定することができます湖下の写真に示すように、幅は120です}$

ブルーレイクデザイン

<!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>

CSSは、Webページをさまざまな画面サイズに適応させます（最も実用的なremの基本的な画面適応スキーム）

最初にコードを見て、コピーして使用するだけです。次のコードをコピーして貼り付けることができます（コードをコメントの形で説明します）。

あなたが満足しているなら、MoChengchenに素晴らしいものを与えてください

ニュートンは言った：私が遠くを見る理由は、私が巨人の肩の上に立っているからであり、私たちは適応するために要素、antdおよび他の解決策を完全に借りてきました。

表示される可能性のある追加の有用な情報に注釈が付けられています

おすすめ