使用rem实现屏幕自适配

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>Document</title>
	<style>
	* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	}

	html {
	font-size: 75px;
	}

	ul {
	display: flex;
	}

	nav ul li {
	list-style: none;
	border: 1px solid red;
	width: 2rem;
	height: 2rem;
	font-size: 1rem;
	}

	.nav1 ul {
	display: flex;
	}

	.nav1 ul li {
	list-style: none;
	border: 1px solid red;
	width: 25%;
	height: auto;
	font-size: 16px;
	}
	</style>
	</head>

	<body>
	<!-- 1. 原理：使用JS或者媒体查询根据屏幕宽度来改变根元素html字体大小
	html字体大小发生了变化使用rem元素宽高内容也会发生变化 -->
	<!-- 让当前html的font-size是页面宽度的1/10
	320 32 html font-size是32px 1rem = 32px 10rem = 320px -->
	<nav>
	<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	</ul>
	</nav>
	<!-- 使用百分比只能实现宽度自适应无法高度自适应 -->
	<nav class="nav1">
	<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	</ul>
	</nav>
	<script>
	// 1. 使用JS来获取屏幕的宽度来计算设置当前屏幕需要设置的html字体大小
	// 当前html的字体是页面宽度的1/10
	// html字体大小 = 屏幕宽度/10
	rem();
	function rem() {
	setHtmlFontSize();

	function setHtmlFontSize() {
	var windowWidth = document.body.offsetWidth;
	var htmlFontSize = windowWidth / 10;
	//获取html设置当前计算的字体大小带单位
	document.querySelector(\'html\').style.fontSize = htmlFontSize + \'px\';
	}
	window.addEventListener(\'resize\', setHtmlFontSize);
	}
	</script>
	</body>

	</html>