<!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. Spring Bean 注入 2 注解篇

    1. 自动装配注解 配置applicationContext.xml开启注解 <?xml version="1.0" encoding="UTF-8"?& ...

  2. [Python爬虫] 之三：Selenium 调用IEDriverServer 抓取数据

    接着上一遍,在用Selenium+phantomjs 抓取数据过程中发现,有时候抓取不到,所以又测试了用Selenium+浏览器驱动的方式:具体代码如下: #coding=utf-8import os ...

  3. GDALOpen 代码分析

    先来一句话,看了这么多GDAL的源代码,并不喜欢其C风格的烙印太重,还是更喜欢boost风格的简洁的现代C++风格.不过为了更好地应用GDAL,更深的定制它,还是需要将源代码看到底.因为GDAL毕竟是 ...

  4. ActiveMQ API 详解

    4.1 开发JSM的步骤 广义上说,一个JMS 应用是几个JMS 客户端交换消息,开发JMS 客户端应用由以下几步构成:      用JNDI 得到ConnectionFactory 对象:      ...

  5. Xamarin C# Android for Visual Studio 平台安装笔记参考

    Xamarin是Mono创始人Miguel de Icaza创建的公司,旨在让开发者可以用C#编写iOS, Android, Mac应用程序,也就是跨平台移动开发. 简介 Xamarin是基于Mono ...

  6. （C++）函数参数传递中的一级指针和二级指针

    主要内容: 1.一级指针和二级指针 2.函数指针传递的例子 3.什么时候需要传递二级指针? 4.二级指针在链表中的使用 1.一级指针和二级指针 一级指针:即我们一般说的指针,就是内存地址: 二级指针: ...

  7. ASP.NET缺少程序集引用怎么办

    如下所示,提示缺少Windows的引用,在using System.Windows.Forms;有一个下划线 错误代码为: 错误    1    命名空间"System"中不存在类 ...

  8. Onvif鉴权实现方式

    Onvif鉴权实现方式 Digest = B64ENCODE( SHA1( B64DECODE( Nonce ) + Date + Password ) ) gsoap中digest生成代码: int ...

  9. OpenERP登录页面调整

    在OpenERP的登录页面中,有针对数据库管理的链接,为了安全起见,一般都会通过修改原始的XML来实现隐藏的目的.但这样每次重新安装以后,都要重新修改,很不方便,所以我们可以通过建立一个新模块的方式来 ...

  10. 解决在sdk manager中更新文件后出现This Android SDK requires Android Developer Toolkit version 23.1的错误

    起因:在sdksdk manager中更新了adt及其它的支持库后,eclipse报错:This Android SDK requires Android Developer Toolkit vers ...