css3之移动端rem响应式布局开发

rem: root element of fontsize。

rem是在移动web app开发中常用的长度单位。rem为相对长度单位,相对于根元素(html) font-size计算值的倍数。根元素(html)元素font-size的默认值为16px,1rem = 16px。
移动应用开发中,通常我们在页面排版布局的时候,使用rem作为统一单位。优点;当制作的页面需要统一适应不同的屏幕大小的时候,只需要调整根元素的font-size的值,页面中的内容响应的会随font-size的变化进行调整。为了便于计算,我们一般设置根元素的font-size的值为100px,然后再去调整页面元素的尺寸。

从而 我们是用根元素 html的font-size作为参照,所以页面会出现等比例的放大缩小。

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
	<style>
		html{
			font-size: 100px;
			width: 100%;

		}
		.box{
			width: 2rem;
			height: 2rem;
			background: red;

		}
	</style>
</head>
<body>
	<div class="box"></div>
	<script>
		// 随屏幕放大而放大,随屏幕缩小而缩小
		function refreshRem(){
			var desW = 750;
			var winW = document.documentElement.clientWidth;
			var ratio = winW/desW;
			document.documentElement.style.fontSize=ratio * 50 +'px';
		}
		refreshRem();
		window.addEventListener('resize',refreshRem);
	</script>
</body>
</html>

以上内容来自mooc慕课

发布了40 篇原创文章 · 获赞 3 · 访问量 1万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览