<!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++最快的读取文件的方案 ——C++ IO优化

    在竞赛中,遇到大数据时,往往读文件成了程序运行速度的瓶颈,需要更快的读取方式.相信几乎所有的C++学习者都在cin机器缓慢的速度上栽过跟头,于是从此以后发誓不用cin读数据.还有人说Pascal的re ...

  2. 数据库迁移利器：Migrator.Net

    几年前在做项目中第一次接触到了Migrator.Net,就深深被吸引住了,至此以后在新的大项目中,我都会使用Migrator.Net来创建或者更新数据库架构.曾经在项目中也发现了小bug并提交给了作者 ...

  3. CSS_LESS 语法/函数详解

    嵌套规则 01 #header { color: black; }#header .navigation {  font-size: 12px; 02 }#header .logo {  03   w ...

  4. qt study 泛型和容器

    所谓泛型(generic) 能够像操作基本类型一样轻松操作对象的类和函数. qt容器类就是泛型类,基于模板的泛型类. 重载运算符overloaed operator, 托管容器 managed con ...

  5. HDFS的常用操作

    本文地址:http://www.cnblogs.com/archimedes/p/hdfs-operations.html,转载请注明源地址. 1.HDFS文件的权限以及读写操作 HDFS文件的权限: ...

  6. [CF 295A]Grag and Array[差分数列]

    题意: 有数列a[ ]; 操作op[ ] = { l, r, d }; 询问q[ ] = { x, y }; 操作表示对a的[ l, r ] 区间上每个数增加d; 询问表示执行[ x, y ]之间的o ...

  7. 分治算法——Karastsuba算法

    分治(Divide and Conquer)算法:问题能够分解为子问题,每一个问题是能够独立的解决的,从子问题的解能够构建原问题. Divide:中间分.随机分.奇偶分等,将问题分解成独立的子问题 C ...

  8. 【Python】【Nodejs】下载单张图片到本地，Python和Nodejs的比较

    Python版本: # 下载单张图片到本地,看用时多少 import urllib.request import datetime starttime = datetime.datetime.now( ...

  9. JavaScript 正则表达式——基本语法（2）

    来源:http://www.cnblogs.com/dolphinX/p/3486214.html 定义 JavaScript种正则表达式有两种定义方式,定义一个匹配类似 <%XXX%>  ...

  10. android中可以使用bitmap的平铺，镜像平铺等减小图片带来的apk过大的问题

    bitmap的平铺.镜像drawable文件夹中新建bitmap,其中的tileMode属性 tileMode 属性就是用于定义背景的显示模式:  disabled  默认值,表示不使用平铺  cla ...