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

时间 2019-11-30

标签自适应布局响应以及 rem 区别栏目 CSS 繁體版

原文原文链接

1、自适应和响应式css

先说共同点：html

　　　　二者都是由于愈来愈多的移动设备（ mobile, tablet device ）加入到互联网中来而出现的为移动设备提供更好的体验的技术。用技术来使网页适应从小到大（如今到超大）的不一样分辨率的屏幕.都是为了解决同一张页面在不一样设备分辨率上合理展现的技术。浏览器

不一样点：服务器

　　　　响应式布局：无论用户使用的是什么设备都是在服务器把数据推送到浏览器后，脚本或CSS自行侦测屏幕大小后执行对应的样式表内容，而且一直经过本地脚本在监听屏幕大小的变化，随时作出样式响应的变化，因此是主动的。同一页面在不一样大小设备可能呈现不同的页面效果布局

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

　　　　　　如图：字体

2、rem,em区别spa

rem,em都是顺应不一样网页字体大小展示而产生的code

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

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

可看下面例子

<html>
<head>
<tit></tit>
<style type="text/css">
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)为准

}
</style>
</head>
<body>

<div class="content">

<p>测试文字</p>

</div>

</body>

</html>