一、自适应和响应式

先说共同点：

　　　　两者都是因为越来越多的 移动设备（ 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. 【转】javascript打印设置

    页面中的代码:<OBJECT id="WebBrowser1" height="0" width="0"        classid ...

  2. 移动端flex布局 微信和UC的兼容性

    请查看以下两个链接 http://www.tuicool.com/articles/Afq6Bzq http://www.sheng00.com/2148.html

  3. textbox只能输入数字或中文的常用正则表达式和验证方法

    验证数字的正则表达式集 验证数字:^[0-9]*$ 验证n位的数字:^\d{n}$ 验证至少n位数字:^\d{n,}$ 验证m-n位的数字:^\d{m,n}$ 验证零和非零开头的数字:^(0|[1-9 ...

  4. Ubuntu 安装和使用 Zip – rar – 7zip

    http://www.rongxuan.org/2013/08/13/ubuntu-%E5%AE%89%E8%A3%85%E5%92%8C%E4%BD%BF%E7%94%A8-zip-rar-7zip ...

  5. Unity3d之个性化皮肤

    1.首先创建皮肤,贴图 2.在代码中定义public GUISkin变量,在Inspector中赋值 3.在OnGUI中调用 GUI.skin = mySkin; GUI.Button(new Rec ...

  6. android studio集成融云 SDK 后在部分机型启动对话时崩溃

    最初构建项目是 eclipse, 后来切换到 android studio来做开发. 后来多个用户反馈在android4.4机型上存在启动对话崩溃的问题.但是IOS 版工程从来没有重现. 调试报错信息 ...

  7. 一个自定义控件的Demo

    里面包括Button.Checkbock.listview.popupwindow的自定义 import android.app.Activity; import android.content.In ...

  8. 5、 Android 之Fragment

    上:http://blog.csdn.net/lmj623565791/article/details/37970961 下:http://blog.csdn.net/lmj623565791/art ...

  9. JavaWeb--Servlet部分笔记

    1.集群:数万个服务器协同工作 2.web应用核心组件:jsp和servlet(属于门户),都在web容器中执行 3.web客户端发http请求(大的字符串)给web服务器:web服务器根据头信息来定 ...

  10. github的使用步骤及体会

      对于github的readme文件的提交,很是坎坷.   首先打开了github的首页,对于满屏的英文,我是头大的.百度搜索教程,百度翻译等等,这些都使用上了.带着试一试的态度,我按了creat ...