一、自适应和响应式

先说共同点：

　　　　两者都是因为越来越多的 移动设备（ 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. <java基础学习>01环境变量配置

    安装完JDK开始配置系统环境变量,在path变量里面添加java的bin目录 方法二: 配置完成后 在命令下输入javac查看是否配置成功 第一个java程序 hello world! class H ...

  2. sql之多表连接

    最近遇到特别多多表连接的问题,因此随笔记下,开始学java和mysql的时间太短,有见解不周的地方,希望读者可以提出探讨. 对于left join.right join和inner join(join ...

  3. ionic环境搭建及新建项目中的各种问题

    具体流程可见http://bbs.ionic-china.com/read-7.html 问题1.安装ionic cordova失败 解决方法:修改npm的源,npm config set regis ...

  4. sublime简书安装配置

    sublime-text3编辑器 安装 sudo add-apt-repository ppa:webupd8team/sublime-text-3 sudo apt-get update sudo ...

  5. (转)Oracle 在Drop表时的Cascade Constraints

    Oracle 在Drop表时的Cascade Constraints 假设A为主表(既含有某一主键的表),B为从表(即引用了A的主键作为外键).则当删除A表时,如不特殊说明,则 drop table  ...

  6. python登录执行命令

    #-*- coding: utf-8 -*- #!/usr/bin/python import paramiko import threading import getpass def ssh2(ip ...

  7. 项目组J2ee程序员的标志，你中招没 转载+评论

    原文在此 校园级别的程序员的标志: 代码中最多的是嵌套if(null == xxx),还要告诉你,null必须写在前面,我靠. 防止把==写成=,c语言时代常犯的错误.由于null不能做左值,在写=的 ...

  8. js限制文本框只能输入数字方法小结(转)

    这篇文章主要分享下js代码限制文本框中只能输入数字的多个实例,学习下js控制文本框中输入数字的方法,需要的朋友可以参考下   有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数 ...

  9. 【转】 shell 判断语句

    转自:http://see.sl088.com/wiki/Shell_%E4%B8%AD%E6%8B%AC%E5%8F%B7 test 和 [] test -z string 判定字串是否為 0 ?若 ...

  10. Spark的Straggler深入学习（2）：思考Block和Partition的划分问题——以论文为参考

    一.partition的划分问题 如何划分partition对block数据的收集有很大影响.如果需要根据block来加速task的执行,partition应该满足什么条件? 参考思路1:range ...