使用rem实现移动web布局

最新推荐文章于 2020-06-01 11:10:49 发布

weixin_30532369

最新推荐文章于 2020-06-01 11:10:49 发布

阅读量50

点赞数

原文链接：http://www.cnblogs.com/xdshi/p/9361307.html

版权

	<!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>
	body{
	min-width: 320px;
	}
	*{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	}
	nav ul{
	display: flex;
	flex-wrap: wrap;
	}
	nav li{
	list-style: none;
	width: 2.5rem;
	height: 2.5rem;
	}
	nav li a{
	display: block;
	color:#666;
	text-align: center;
	text-decoration: none;
	}
	nav li a img{
	width: 1.013rem;
	height: 1.013rem;
	}
	nav li a p {
	font-size: 0.346rem;
	}
	</style>
	</head>

	<body>
	<nav>
	<ul>
	<li>
	<a href="#">
	<img src="images/nav8.png" alt="">
	<p>原创</p>
	</a>
	</li>
	<li>
	<a href="#">
	<img src="images/nav1.png" alt="">
	<p>原创</p>
	</a>
	</li>
	<li>
	<a href="#">
	<img src="images/nav2.png" alt="">
	<p>原创</p>
	</a>
	</li>
	<li>
	<a href="#">
	<img src="images/nav3.png" alt="">
	<p>原创</p>
	</a>
	</li>
	<li>
	<a href="#">
	<img src="images/nav4.png" alt="">
	<p>原创</p>
	</a>
	</li>
	<li>
	<a href="#">
	<img src="images/nav5.png" alt="">
	<p>原创</p>
	</a>
	</li>
	<li>
	<a href="#">
	<img src="images/nav6.png" alt="">
	<p>原创</p>
	</a>
	</li>
	<li>
	<a href="#">
	<img src="images/nav7.png" alt="">
	<p>原创</p>
	</a>
	</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>

转载于:https://www.cnblogs.com/xdshi/p/9361307.html

weixin_30532369

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用rem实现移动web布局

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,...
复制链接

扫一扫