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

末蓝、 2021-11-17 11:24 555阅读 0赞

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

保证根据不同的设备进行适配，同时保证缩放比例是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>

页面：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70]: /images/20211116/563f5a294d444e2080cfc5d623f02711.png