一、自适应和响应式

先说共同点：

　　　　两者都是因为越来越多的 移动设备（ 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. Yii2 rules 添加时间比较功能

    php比较类文件:yiisoft\yii2\validators\CompareValidator.php JS比较类文件: yiisoft\yii2\assets\yii.validation.js ...

  4. 在VS2010中建立C#三层结构

    转自:http://www.blueidea.com/microsoft/vs2010/2010_con/2010081301.htm 三层结构,会有多个项目.为了让各项目之间的关系反映在目录结构上所 ...

  5. SQLServer存储过程和触发器学习记录及简单例子

     一.存储过程 存储过程即为能完成特定功能的一组SQL语句集.如果需要对查出的多条数据进行操作的话,这里需要理解游标(CURSOR)的概念,对于oracle有for each row命令,可以不用游标 ...

  6. java发送http的get、post请求[转]

    原文链接:http://www.cnblogs.com/zhuawang/archive/2012/12/08/2809380.html package wzh.Http; import java.i ...

  7. USB协议规范学习（一）

    什么是USB OHCI规范? OHCI(Open HCI)是目前使用比较广泛的三种USB主机控制器规范之一.USB体系结构是由四个主要部分组成:客户软件/USB驱动,主机控制器驱动(HCD),主机控制 ...

  8. 对ToString("X2 ")的理解

    /// <summary>        /// 将byte型转换为字符串        /// </summary>        /// <param name=&q ...

  9. 用JAVA写查询一个字符串中是否包含另外一个字符串以及出现的次数

    package JAVA; import java.awt.List;import java.util.ArrayList;/** *  * @author 梁小鱼 * */public class ...

  10. Java HttpGet

    String urlStr ="https://qyapi.weixin.qq.com/cgi-bin/gettoken?a=a&b=b"; URL url = null; ...