互联网的搬运工 分类搜索 官网    VIP电影   留言板   免责声明    我要投稿   后花园

网站首页 建站 正文

px、em和rem的区别是什么?如何实现H5手机端的适配?

小冰 2020-01-29 建站 194 ℃ 0 评论

如何实现移动端的自动适配。


  • px:物理像素,像素px是相对于显示器屏幕分辨率而言的,常用于浏览器的长度单位。

  • em:相对长度单位,默认情况下1em = 16px,但可以通过修改其父级的font-size属性从而改变大小比例。这种单位有个问题,比如把body的font-size定义为50%,一般地会是8px。那么你在body里字体大小就是1em=8px了。可当你定义了一个div,然后把字体设置成了75%,这个时候你会发现,原来他继承了body的值,现在字体更小了,变成了6px!

  • rem:相对长度单位,默认情况下1rem = 16px,它解决了em的弊端,rem只会相对html的font-size值,不会受到其它父级font-size值的影响,也是目前实现H5手机端自适应较常用的方法。

什么是自适应?如:我想要设置一个容器宽度在手机中占全屏的一半,于是设置width:Xrem,在自适应情况下,无论是何种分辨率的手机,容器都占全屏一半,这就是自适应。这意味着在不同设备,Xrem转换为分辨率可能是200px、300px甚至是800px等任何值,即转换时针对各种设备都有一个自适应的放大或缩小的比例。公式为:(1*X)rem = (16*X)px × 比例值。因此,我们只需要把比例值计算出来并赋值给http元素,就可以实现自适应。


为了便于理解,我再举个具体的例子,比如我现在有一台移动设备分辨率为980px,UI设计师给我的设计稿是750px,那我设置多少rem才可以让div占一半呢?


设备默认:1rem = 16px,得出 980/16 = 61.25rem ,即满屏时 width=61.25rem。


设计稿:为了便于计算,假设1rem = 100px,得出 750/ 100 = 7.5rem,即满屏时 width=7.5rem。


比例值fontValue = 61.25 / 7.5 = 8.167 = 816.7%,我们只需要把http的font-size: 816.7%后,把容器的width:7.5rem就是满屏了,那么半屏就是3.75rem。不知道有没有发现设计稿的一半刚好就是375px,而这里半屏设值为3.75rem,这下你明白假设为1rem=100px的用意了吧,刚好是100倍,当然当然你也可以自己随意假设,但最终的fontValue值都是一样的,这里假设成100倍是为了便于计算设计稿中的px值转为rem。


同理,如果设计稿让你在创建一个宽120px、高120px的div,根据1rem=100px得出转换得出:

div {
width: 1.2rem
height: 1.2rem
}

根据上面的规律,于是我们得到了一个计算http中font-size值的算法,即自适应算法如下:

<style>
	body {
		padding: 0;
		margin: 0;
	}
	
	#container {
		width: 3.75rem;
		height: 1rem;
		background-color: red;
	}
	
	#child {
		width: 490px;
		height: 131px;
		margin-top: 10px;
		background-color: yellow;
	}
</style>
 
<body>
	<div id="container"></div>
	<div id="child"></div>
</body>
 
<script>
	(function(originWidth) {  
		var currClientWidth, fontValue;  
		__resize();
		window.addEventListener('resize', __resize, false);
 
		function __resize() {    
			currClientWidth = document.documentElement.clientWidth;
			console.log(currClientWidth);
			// fontValue = ((currClientWidth/16)*(100/originWidth)*100).toFixed(2);
			// 换算后 
			fontValue = ((6.25 * currClientWidth / originWidth) * 100).toFixed(2);   
			document.documentElement.style.fontSize = fontValue + '%';  
		}
	})(750); // ui设计稿的宽度,一般750或640
</script>

Tags:

< 温馨提示 >
本站资源如有密码均为:70ol.com
学到东西应该懂得感恩作者 无脑喷子永封IP段+删帐号所有评论
本站资源软件和源码 文章大部分为网上收集,如侵犯您的权利,请告知管理员,我们会及时删除,并向您赔礼道歉.

站长QQ:  官方QQ群:558413792

猜你喜欢

本文暂时没有评论,来添加一个吧(●'◡'●)


欢迎 发表评论:

请填写验证码
搜索
最近发表
网站分类
友情链接
标签列表
文章归档
最新留言
站点信息
  • 文章总数:281
  • 页面总数:1
  • 分类总数:14
  • 标签总数:17
  • 评论总数:2
  • 浏览总数:199210