一、自适应和响应式

先说共同点：

　　　　两者都是因为越来越多的 移动设备（ 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>

自适应布局，响应式布局以及rem,em区别的更多相关文章

  1. flex布局 响应式布局

    移动端页面开发流程   移动端页面布局 一.移动端app分类 1.Native App原生app手机应用程序 使用原生的语言开发的手机应用,Android系统用的是java,ios系统用的是objec ...

  2. Bootstrap 手机屏幕自适应的响应式布局开关

    head中添加 <meta name="viewport" content="width=device-width, initial-scale=1, shrink ...

  3. Css布局 响应式布局介绍

    1. 概念: 写一套css样式可以同时适配多个终端,是为解决移动互联网诞生的. 2. 作用: 面对不同的分辨率设备灵活性强,能够快捷解决多设备显示适应问题 3. 原理 媒体查询 ① 外联式媒体查询语法 ...

  4. 网站响应式布局/网站自适应问题+rem、em、px、pt及网站字体大小设配

    Bootstrap 网格系统: Bootstrap CSS: Bootstrap 组件及插件: 一.什么是响应式布局?       响应式布局是Ethan Marcotte在2010年5月份提出的一个 ...

  5. web页面之响应式布局

    一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...

  6. 浅谈html5 响应式布局

    一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本. 这个概念是为解决移动互联 ...

  7. html5 响应式布局

    一.什么是响应式布局?       响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本. 这个概念是为 ...

  8. media screen 响应式布局(知识点)

    一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...

  9. 响应式布局和BootStrap 全局CSS样式

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  10. 14、响应式布局和BootStrap 全局CSS样式知识点总结-part1

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

随机推荐

  1. ZOJ 3817Chinese Knot(The 2014 ACM-ICPC Asia Mudanjiang Regional First Round)

    思路: 将4个串每个串都反向这样得到新的四个串一共8个串,对于母串每个位置检测这个串能不能放进去,hs或者后缀数组都可以.然后dp[i][j]  (0<i<len  0<=j< ...

  2. Android学习日记

    1.[2013-10-03 13:45:38 - FileManager] res\drawable-xxhdpi\FileManager.jpg: Invalid file name: must c ...

  3. as3 代码加解密

    private var loader:URLLoader; ... private function init():void { loader = new URLLoader; req=URLRequ ...

  4. Leetcode 给一个数a和一个向量b，找出该向量b中的2个数相加等于a,并输出这两个数在向量中的位置

    看C++primer Plus看的无聊,第一次做Leetcode的练习,本来想做二维向量的,结果始终通不过,查了原因,必须用一维的... 一维的答案: class Solution {  public ...

  5. javamail 发送附件

    1.属性文件 mail.protocol=smtpmail.host=mail.port=mail.auth=truemail.timeout=25000mail.username=mail.pass ...

  6. 例子：Execution Model Sample - 应用状态保存

    WP中,当你的应用被切换到后台 后,就进入了休眠状态,然后当一个应用从墓碑恢复时,如何恢复相应的状态,该例子就演示了如何保存和恢复UI以及APP相关状态. 这里有一篇很好的文章,请参见: http:/ ...

  7. hibernate开发(1)

    1 什么是ORM OR-mapping 是 object relational mapping 对象关系映射,是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间的转换.解决了不同数据库s ...

  8. 通过FEDERATED存储引擎跨实例访问数据

    通过FEDERATED存储引擎同步两实例间的表数据需求情景:实例1中A库中的三个视图是实例2中的B库所依赖的,B需要A库中三个视图的实时数据.方案:通过FEDERATED来完成跨势力的查询FEDERA ...

  9. 第七章 LED将为我闪烁：控制发光二极管

    该Linux驱动用来控制开发板上的4个LED灯,即通过向Linux驱动发送数据可以控制LED灯的开关.LED驱动提供两种交互方式:命令和读写设备文件. 测试LED驱动之前需用USB线连接开发板,然后打 ...

  10. JAVA学习心得

    学习JAVA一个学期了,虽然学的不是很好,也没有彻底理解JAVA的真正内涵,但是我认为学习java应该是循环渐进,有始有终,按部就班,脚踏实地.java是一门有着阶梯性的一门语言,信心,恒心,毅力是最 ...