<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        html{

            font-size: 50px;

        }

        body{

            margin: 0;

            padding: 0;

            line-height: 1;/*一倍的文字大小的行高*/

            font-size: 20px;

        }

        .em{

            font-size: 2em;

        }

        .rem{

            font-size: 2rem;

        }

        .remBox{

            height: 1rem;

            width: 1rem;

            background: red;

            border: 0.2rem solid #ccc;

            position: relative;

            left: 1rem;

            top: 0;

        }

    </style>

</head>

<body>

    <!--

        1.em.rem 默认的基数是16px  1em 1rem 大小是16px (文字默认的大小就是16px)

        2.em 基数是基于父元素的字体大小

        3.基于谁做计算的？

        rem 当中的r代表是 root 根元素  html当中的根元素是  html标签

        rem的基数是基于文档根元素html标签得分字体大小来决定的

        在使用px这个单位的任何地方都可以用

    -->

    <div class="em">ABC</div>

    <div class="rem">ABC</div>

    <div class="remBox"></div>

</body>

</html>

认识rem的更多相关文章

  1. 在rem布局下使用背景图片以及sprite

    现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及我的好友@墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景 ...

  2. 移动端自适应之——rem与font-size

    需求:在不同的移动终端设备中实现,UI设计稿的等比例适配. 方案:布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size. 假设设计稿是宽750px来做的,书写css方便计 ...

  3. px-rem px转换为rem的工具

    将px转换为rem的工具,github地址:https://github.com/finance-sh/px-rem 将px转换为rem的工具 怎样转换静态文件 安装: npm install px- ...

  4. px-rem 一个将px转换为rem的工具

    将px转换为rem的工具,github地址:https://github.com/finance-sh/px-rem 怎样转换静态文件 安装: npm install px-rem -g 然后跑下命令 ...

  5. 基于rem的移动端自适应解决方案

    代码有更新,最好直接查看github: https://github.com/finance-sh/adaptive adaptivejs原理: 利用rem布局,根据公式 html元素字体大小 = d ...

  6. px和em，rem的区别

    1.px是你屏幕设备物理上能显示出的最小的一个点,这个点不是固定宽度的,不同设备上点的长宽.比例有可能会不同.假设:你现在用的显示器上1px宽=1毫米,但我用的显示器1px宽=两毫米,那么你定义一个d ...

  7. Sublime 插件- px 转rem

    一个CSS的px值转rem值的Sublime Text 3自动完成插件. 插件效果如下: 安装 克隆项目   https://github.com/hyb628/cssrem.git 进入packag ...

  8. 响应式布局-Rem的用法

    前言: 文章较为系统地介绍了rem这个新的文字大小单位,绝对干货,绝对好文.转载时略有改动.   先来看看一些基本理念,比如: 响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式 ...

  9. 手机端页面自适应之rem布局

    W3C官网上是这样描述rem的--"font size of the root element" . rem布局在移动端发挥的比较好. 阿里团队高清方案: <script&g ...

  10. WebApp开发之--"rem"单位

    随着web app的兴起,rem这是个低调的css单位,近一两年开始崭露头角,有许多朋友对于它的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我认为rem是用来做web app它绝对是 ...

随机推荐

  1. C# 利用反射动态创建对象[摘录]

    摘自:http://hi.baidu.com/yangyuhang/blog/item/f12ea90e13f214e336d12250.html 在VS.Net中,有很多种方法动态调用对象的构造函数 ...

  2. 关于vs2013调试的偶然错误发现与总结(vs2013的承载进程)---ShinePans

    当项目的属性选择为 启用 vs2013承载进程 或出现一下错误: 尝试运行项目时出错:未能加载文件或程序集"GroupBoxTest" 或它的某一个依赖项.给定程序集名称" ...

  3. 如何修改Git commit的信息

    原文地址: http://xiguada.org/change-git-commit-message   Git cimmit信息push后,如何修改,amend可以修改最后一次commit信息,但对 ...

  4. 关于loader加载的东西必须是继承sprite

    如果不是继承sprite

  5. Windows Server 2012怎样部署Domain Controller

    用过Windows Server2008 系统的运维师们,可能习惯于用dcpromo的方式部署Domain Controller,可是在WindowsServer2012操作系统已经把这样的部署方式取 ...

  6. 2014年七月最佳jQuery插件荟萃

    本月的jQuery插件荟萃我们将介绍几款非常不错的jQuery插件,涵盖了表单,幻灯,页面设计等等方面,相信大家肯定会喜欢! Select or Die 一款帮助开发者美化并且强化选择框的jQuery ...

  7. 深入一点 让细节帮你和Fragment更熟络

    有一段时间没有写博客了.作为2017年的第一篇,初衷起始于前段时间一个接触安卓开发还不算太长时间的朋友聊到的一个问题: "假设,想要对一个Fragment每次在隐藏/显示之间做状态切换时进行 ...

  8. C#基础视频教程5.3 如何编写简单的超级热键

    跟前面一章讲解计算器一样,到最后一小节,我们总是要把代码规整好,让整个程序显得非常简洁,先做个文件夹把我们自定义的类库都放进去   然后我们开始整理Form1里面的代码,为了实现超级热键的功能,我们应 ...

  9. nginx 设置错误的自己定义404页面跳转到500

    5年前写的站, 当时是在apache下写的error page, 换了nginx后, 404页面直接跳到了500 server内部错误. 仅仅须要在配置 try_files 的时候指定一下就能够了 我 ...

  10. InnerHtml() 与html( )的区别

    InnerHtml() 与html( )的区别 在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容. 如果选择器匹配多于一个的元素,那么只有第一个匹配元素的 HTM ...