自适应布局，响应式布局以及rem,em区别
2024-04-09 13:13:09
一、自适应和响应式
先说共同点：
两者都是因为越来越多的 移动设备（ mobile, tablet device ）加入到互联网中来而出现的为移动设备提供更好的体验的技术。用技术来使网页适应从小到大（现在到超大）的不同分辨率的屏幕.都是为了解决同一张页面在不同设备分辨率上合理展示的技术。
不同点：
响应式布局：不管用户使用的是什么设备都是在服务器把数据推送到浏览器后，脚本或CSS自行侦测屏幕大小后执行对应的样式表内容，并且一直通过本地脚本在监听屏幕大小的变化，随时做出样式响应的变化，所以是主动的。同一页面在不同大小设备可能呈现不一样的页面效果
自适应：不同大小设备呈现同样的页面效果，只是文字、图片等的大小不一样，但是相对位置一样。即在不同大小设备看起来一样
如图：
二、rem,em区别
rem,em都是顺应不同网页字体大小展现而产生的
em：是相对其父元素，在实际应用中相对而言会带来很多不便
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>
最新文章
- ViewPager图片切换的简单案例
- ORACLE查看并修改session和连接最大数
- 【BZOJ】2194: 快速傅立叶之二
- Android的init过程（二）：初始化语言（init.rc）解析【转】
- Android——AnimationDrawable 实现动画
- 平衡搜索树（一） AVL树
- C++ - Vector 计算 均值(mean) 和 方差(variance)
- uva 11077 置换
- 经典排序算法 — C# 版（上）
- node.js浅见
- spring mvc 500错误Allocate exception for servlet AppService javax.naming.NamingException: Cannot create resource instance 竟是@Resource的原因
- win10下Redis安装
- DBMS_METADATA.set_transform_param格式化输出
- 甲方安全建设之office365邮箱弱口令检测
- Excel分组快速自动填充编号
- 【Django】ModuleNotFoundError: No module named 'books_ordersschool'
- drupal7 获取profile2模块自定义字段的值
- CSS grid layout
- ansible playbook对错误的处理
- 中文解码Unicode