rem布局

126 阅读1分钟

rem:相对单位

指相对于**根元素(HTML)**的字体大小(font-size)的单位。适用于任何设定长度的单位。

font-size : 10px ;  
1rem = 10pxp{font-size:10px;font-size:1rem;}

js 来获取设备宽度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name='viewport'  content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<style>
			div p{background: red;margin-bottom:20px;height:5rem;}
			html{font-size:60px}
		</style>
	</head>
	<body>
		<div>
			<p style='font-size:0.2rem'>0.2rem</p>
			<p style='font-size:0.4em'>0.4rem</p>
			<p style='font-size:0.6rem'>0.6rem</p>
			<p style='font-size:0.8rem'>0.8rem</p>
			<p style='font-size:1rem'>1rem</p>
			<p style='font-size:2rem'>2rem</p>
			<p style='font-size:3rem'>3rem</p>
		</div>
	</body>
	<script>
		function resize(){
			document.documentElement.style.setProperty('font-size', (document.documentElement.clientWidth/6) + 'px')
		}
		window.onresize = resize

		resize()
	</script>
</html>