自适应布局，响应式布局以及rem,em区别

来源：互联网发布：mac系统安装flash 编辑：程序博客网时间：2024/05/01 09:58

一、简而言之，

自适应：不同大小设备呈现同样的页面效果，只是文字、图片等的大小不一样，但是相对位置一样。即在不同大小设备看起来一样

响应式：不同大小设备可能呈现不一样的页面效果

自己画了一个简略的示意图，如下：

自适应-响应式

二、rem,em区别

rem,em都是顺应不同网页字体大小展现而产生的

其中，em是相对其父元素，在实际应用中相对而言会带来很多不便

而rem是始终相对于html大小，即页面根元素

可看下面例子

<html>

<body>

</div>

</body>

</html>

html{

font-size: 10px;

}

.content{

font-size: 1.5rem;

//font-size: 1.5em;

}

.content p{

font-size: 1rem; //如果使用rem,p文字font-size:1*10px=10px

//font-size: 1em; //如果使用em,p文字font-size: 1*1.5*10px=15px,因为其父元素是.content,所以要以父元素1.5em(1.5*10px)为准

}

0 0