h5开发手机端项目如何自适应布局？em和rem的区别？

最新推荐文章于 2024-04-13 13:14:42 发布

置顶落花别有意流水似无情

最新推荐文章于 2024-04-13 13:14:42 发布

阅读量845

点赞数

分类专栏： h5开发文章标签： h5开发自适应布局 em和rem的区别

本文链接：https://blog.csdn.net/weixin_42931825/article/details/97801740

版权

h5开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

首先要让屏幕自适应大小代码如下：

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>

保证根据不同的设备进行适配，同时保证缩放比例是1:1，就可以实现屏幕自适应，

除此之外还要实现字体大小的自适应，可以根据不同的屏幕大小来自动调整字体大小：

// 根据不同的屏幕获取字体大小
document.getElementsByTagName("html")[0].style.fontSize=document.documentElement.clientWidth/15+"px";
//改变窗口的时候重新计算大小
window.onresize = function(){
	document.getElementsByTagName("html")[0].style.fontSize=document.documentElement.clientWidth/15+"px";
}

开发的时候我是根据iphone6/7来开发的，屏幕大小宽度就是375,那么字体的话1rem=375/15=25px,但是为了开发，我们设置的时候用的是rem为单位，基本的字体单位为：

25px为1rem
20px:0.8rem
18px:0.72rem
16px:0.64rem
14px:0.56rem
12px:0.48rem

这时候有人就会问，为神魔不用em单位呢，rem和em又什么区别呢，我这里简单的说一哈，rem单位是相对于根元素数据单位，就是相对于html大小的单位，所以1rem=25px，而em是相对于父级的大小单位，如果每一个父级不一样大小，那么子级的元素em单位大小都是不同的，em是需要一个固定的元素来当做父级，如设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			这是div
			<p>这是p元素</p>
		</div>
	</body>
</html>
<style type="text/css">
	html{
		font-size: 10px;
	}
	div{
		font-size: 2em; //20px
	}
	p{
		font-size: 2em;//40px
	}
</style>

页面：

我们就可以看出em是根据元素的父元素来设置大小的

落花别有意流水似无情

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
h5开发手机端项目如何自适应布局？em和rem的区别？

首先要让屏幕自适应大小代码如下：<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>保证根据不同的设备进行适配，同时保证缩放比例是1:1，就可以实现屏幕自适应，除此之外还要实现字体大小的自适应，可以根据不同的屏幕大小来自动调整字体大小：// 根据...
复制链接

扫一扫

专栏目录