自适应布局：不同终端上显示的文字，图片，等位置排版都是一样的，只是大小不同。

响应式布局：通过媒体查询监听屏幕大小的变化，做出响应式的改变，在不同设备可能展现不同的样式效果。

em:是相对其父元素的。

rem:相对于页面根元素，推荐使用rem。

自适应和响应式布局的区别，em与rem的更多相关文章

  1. bootstrap 自适应和响应式布局的区别

    自适应:  不管屏幕多大,都尽量不换行,而只是横向缩放. 响应式: 屏幕变小了之后,属于同一行的元素受到挤压后,行的右边元素自动换行显式: 屏幕大了后,本属于同一行的元素尽可能的排在同一行内: boo ...

  2. 【技术分享会】 @第三期 CSS框架 PRUE 实现自适应和响应式

    Pure网址:https://purecss.cn/ 什么是响应式和自适应? .响应式:样式会随着屏幕大小改变,同一页面设备不同样式不同 .自适应:不管屏幕大小,页面的样式比例不变 响应式和自适应怎么 ...

  3. 彻底弄懂响应式设计中的em和rem

    前一阵子在响应式开发中遇到了em和rem的问题,也上网搜过一些文章,篇幅很长,也没有仔细看,今天来总结一下. rem是指:根元素(root element,html)的字体大小, em是指:父元素的字 ...

  4. 自适应布局，响应式布局以及rem,em区别

    一.自适应和响应式 先说共同点: 两者都是因为越来越多的 移动设备( mobile, tablet device )加入到互联网中来而出现的为移动设备提供更好的体验的技术.用技术来使网页适应从小到大( ...

  5. 响应式布局中为什么要使用em设置字体大小而不用px

    px像素(Pixel).相对长度单位.像素px是相对于不同设备显示器屏幕分辨率(pad/phone/pc)而言的.(引自CSS2.0手册) 1em指的是一个字体的大小,它会继承父级元素的字体大小,因此 ...

  6. 响应式布局之 px、em、 rem

    一.写在前面的话 作为一面前端开发者,对 px .em . rem 应该是再熟悉不过了,但大多数小伙伴应该都和我一样仅仅停留在了解的层面,并不是实质性的掌握它们.本文对三者进行了详细的总结和详细说明, ...

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

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

  8. 响应式布局 max-device-width 与 max-width 的区别

    闲来没事,研究了一下多屏适配和响应式布局的 CSS. 第一种写法 @media screen and (max-device-width: 320px) { } @media screen and ( ...

  9. CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

随机推荐

  1. Python的正则表达式与JSON

    Python的正则表达式需要导入re模块 菜鸟教程:http://www.runoob.com/python/python-reg-expressions.html 官方文档:https://docs ...

  2. Vue项目中引用vue-resource步骤

    直接上步骤: 1.通过命令,进入到当前项目所在目录 2.输入以下命令npm install vue-resource --save 3.安装完毕后,在main.js中导入,如下: import Vue ...

  3. 功能强大的StickyHeaderListView：标题渐变、吸附悬停、筛选分类、动态头部

    StickyHeaderListView 主要是通过 ListView 添加头部实现,将复杂的头部分解为若干部分,如下图:Header 1(广告位).Header 2(频道位).Header 3(运营 ...

  4. Sink Prosessor - Flume的可靠性保证：故障转移、负载均衡

    Flume的一些组件(如Spooling Directory Source.File Channel)能够保证agent挂掉后不丢失数据. 1.负载均衡 1)Load balancing Sink P ...

  5. uml各类图

    原文:http://www.cnblogs.com/way-peng/archive/2012/06/11/2544932.html 一.UML是什么?UML有什么用? 二.UML的历史 三.UML的 ...

  6. [翻译] CSStickyHeaderFlowLayout

    CSStickyHeaderFlowLayout https://github.com/jamztang/CSStickyHeaderFlowLayout Parallax, Sticky Heade ...

  7. 使用Instruments中的CoreAnimation分析动画

    使用Instruments中的CoreAnimation分析动画 1. 打开Instruments中的CoreAnimation 2. 运行前的准备工作 要注意勾选以下选项,便于调试 3. 运行与调试 ...

  8. NSArray排序方法讲解

    NSArray排序方法讲解 给数组排序有着多种方式 最麻烦的是sortedArrayUsingSelector:,其次是sortedArrayUsingDescriptors:,最容易使用的就是sor ...

  9. PowerShell管理SCOM2007R2

    get-operationsmanagercommand #定义RMS服务器名称(SCOM管理控制台所在服务器名称)#Connect to the RMS server and initialize ...

  10. SQL语言DDL DML DCL TCL四种语言

    1.DDL(Data Definition Language)数据库定义语言:DDL使我们有能力创建或删 除表格.可以定义索引(键),规定表之间的链接,以及施加表间的 约束. • 常见DDL 语句: ...