移动端rem怎么用?

最新推荐文章于 2024-08-06 18:24:19 发布

Bright2017

最新推荐文章于 2024-08-06 18:24:19 发布

阅读量6k

点赞数 1

分类专栏：移动端

本文链接：https://blog.csdn.net/Bright2017/article/details/78752403

版权

移动端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

简单说明下，一般字体有4种，px,pt,em,rem,这里简单介绍两个px和rem。

感觉菜鸟教程介绍的还是比较清晰的，可以去看看：http://www.runoob.com/w3cnote/px-em-rem-different.html

在做移动端项目当中呢推荐大家使用rem来当单位，因为真的很方便，可以根据比例适配不同的屏幕大小。

使用rem的方式其实很简单，这里不得不向大家推荐下阿里巴巴团队提供的插件。

只需要三个步骤：

1.添加<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

2.设置默认的：<meta name="flexible" content="initial-dpr=2" />

3.引入阿里的cdn：<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

下面是简单的例子，可以复制看看，用谷歌浏览器模拟移动端不同型号查看效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="flexible" content="initial-dpr=2" />
		<title>移动端字体适配</title>
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.test2,.test3,.test4,.test5,.test6{
				width: 4.9rem;
				height: 5rem;
				line-height: 5rem;
				font-size: 1rem;
				text-align: center;
				display: inline-block;
			}
			.test2{
				background-color: orange;
			}
			.test3{
				background-color: #0000FF;
			}
			.test4{
				background-color: #FF0000;
			}
			.test5{
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<div class="test2">111111</div>
		<div class="test3">222222</div>
		<div class="test4">333333</div>
		<div class="test5">444444</div>
	</body>
</html>

效果是这样的：