<!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. Hive安装与配置——深入浅出学Hive

    第一部分:软件准备与环境规划 Hadoop环境介绍 •Hadoop安装路径 •/home/test/Desktop/hadoop-1.0.0/ •Hadoop 元数据存放目录 •/home/test/ ...

  2. [转] 菜鸟手脱VMP，附上脱壳过程和自己写的脚本,可跨平台

    转载:http://www.52pojie.cn/thread-467703-1-1.html 工作需要要脱一个VMP壳,我是一个从来没接触过脱壳的人.瞬间那种心情遇到的人应该都知道!没办法硬着头皮找 ...

  3. .net使用自定义类属性

    .net中可以使用Type.GetCustomAttributes获取类上的自定义属性,可以使用PropertyInfo.GetCustomAttributes获取属性信息上的自定义属性. 下面以定义 ...

  4. centos版本7以上网卡名修改

    1.初始状态网卡 2.首先,先编辑网卡的配置文件 vi /etc/sysconfig/network-scripts/ifcfg-eno16777736 将里面的NAME项修改为eth0 3.然后,禁 ...

  5. 河流Shader

    原地址:http://www.unity蛮牛.com/blog-2321-336.html Shader "Custom/TextureEffect" { Properties { ...

  6. 算法笔记_128:完美洗牌算法（Java）

    目录 1 问题描述 2 解决方案 2.1位置置换算法 2.2 走环算法   1 问题描述 有一个长度为2n的数组{a1,a2,a3,...,an,b1,b2,b3,...,bn},希望排序后变成{a1 ...

  7. Linux crond实例

    linux系统的定时任务: 1:linux系统自身定期执行的任务工作:系统周期性执行的任务工作,如轮询系统日志,备份系统数据,清理系统缓存等. [root@10-4-5-9 ~]# ll /var/l ...

  8. java.lang.Void and void

    java.lang.Void is analogous to java.lang.Integer. Integer is a way of boxing values of the primitive ...

  9. chrome打包程序

      使用chrome如何打包扩展程序中已经存在的插件及所遇到的问题 CreateTime--2017年7月4日07:41:33 Author:Marydon 一.前言 鉴于本文章的访问量大,特此进行多 ...

  10. 〖Linux〗Bash快捷键使用

    这篇 Bash Shell Shortcuts 的快捷键总结的非常好.值得学习.下面内容大多数是拷贝粘贴与总结. CTRL 键相关的快捷键: Ctrl + a - Jump to the start ...