本文介绍了自适应布局和响应式布局的区别，自适应布局在不同设备上保持相同布局，而响应式布局则会根据设备调整布局。同时，探讨了CSS单位rem与em的区别，rem始终基于html的字体大小，而em则是相对于父元素的字体大小，通过示例展示了它们在实际应用中的影响。
一、简而言之，
自适应：不同大小设备呈现同样的页面效果，只是文字、图片等的大小不一样，但是相对位置一样。即在不同大小设备看起来一样
响应式：不同大小设备可能呈现不一样的页面效果
自己画了一个简略的示意图，如下：
二、rem,em区别
rem,em都是顺应不同网页字体大小展现而产生的
其中，em是相对其父元素，在实际应用中相对而言会带来很多不便
而rem是始终相对于html大小，即页面根元素
可看下面例子
<html>
<body>
<div class="content">
<p>测试文字</p>
</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.47元/天 解锁文章
扫一扫
2262
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
