认识rem
<!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的更多相关文章
- 在rem布局下使用背景图片以及sprite
现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及我的好友@墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景 ...
- 移动端自适应之——rem与font-size
需求:在不同的移动终端设备中实现,UI设计稿的等比例适配. 方案:布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size. 假设设计稿是宽750px来做的,书写css方便计 ...
- px-rem px转换为rem的工具
将px转换为rem的工具,github地址:https://github.com/finance-sh/px-rem 将px转换为rem的工具 怎样转换静态文件 安装: npm install px- ...
- px-rem 一个将px转换为rem的工具
将px转换为rem的工具,github地址:https://github.com/finance-sh/px-rem 怎样转换静态文件 安装: npm install px-rem -g 然后跑下命令 ...
- 基于rem的移动端自适应解决方案
代码有更新,最好直接查看github: https://github.com/finance-sh/adaptive adaptivejs原理: 利用rem布局,根据公式 html元素字体大小 = d ...
- px和em，rem的区别
1.px是你屏幕设备物理上能显示出的最小的一个点,这个点不是固定宽度的,不同设备上点的长宽.比例有可能会不同.假设:你现在用的显示器上1px宽=1毫米,但我用的显示器1px宽=两毫米,那么你定义一个d ...
- Sublime 插件- px 转rem
一个CSS的px值转rem值的Sublime Text 3自动完成插件. 插件效果如下: 安装 克隆项目 https://github.com/hyb628/cssrem.git 进入packag ...
- 响应式布局-Rem的用法
前言: 文章较为系统地介绍了rem这个新的文字大小单位,绝对干货,绝对好文.转载时略有改动. 先来看看一些基本理念,比如: 响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式 ...
- 手机端页面自适应之rem布局
W3C官网上是这样描述rem的--"font size of the root element" . rem布局在移动端发挥的比较好. 阿里团队高清方案: <script&g ...
- WebApp开发之--"rem"单位
随着web app的兴起,rem这是个低调的css单位,近一两年开始崭露头角,有许多朋友对于它的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我认为rem是用来做web app它绝对是 ...
随机推荐
- C# 弹出USB外接硬盘（U盘）
最近一个项目需要通过代码来弹出USB外接硬盘设备,经过google找到了下面这个类库: http://www.codeproject.com/Articles/13530/Eject-USB-disk ...
- 架构设计：系统间通信（20）——MQ：消息协议（下）
(接上文<架构设计:系统间通信(19)--MQ:消息协议(上)>) 上篇文章中我们重点讨论了"协议"的重要性.并为各位读者介绍了Stomp协议和XMPP协议. 这两种协 ...
- Visual studio中后期生成事件命令使用
在做项目是总要把发布后的一些dll拷贝的根网站的bin目录下,为了避免每次都需要手动拷贝可以在 项目的生成事件中写入bat命令,下面的命令只在项目使用的发布配置时执行拷贝, (在生成->配置管理 ...
- UNIX网络编程读书笔记：套接口选项
概述 有很多方法来获取和设置影响套接口的选项: getsockopt和setsockopt函数 fcntl函数 ioctl函数 getsockopt和setsockopt函数 这两个函数仅用于套接口. ...
- Web中树形数据(层级关系数据)的实现—以行政区树为例
在Web开发中常常遇到树形数据的操作,如菜单.组织机构.行政区(省.市.县)等具有层级关系的数据. 以下以行政区为例说明树形数据(层级关系数据)的存储以及实现,效果如图所看到的. 1 数据库表结构设计 ...
- 显示游戏FPS帧率的几种计算方式
FPSDisplay.cs using UnityEngine; using System.Collections; public class FPSDisplay : MonoBehaviour { ...
- sql通过某个字段名找到数据库中对应的表
sql通过某个字段名找到数据库中对应的表 SELECT sb.name FROM syscolumns s JOIN sysobjects sb ON s.id=sb.id WHERE s.name= ...
- java 泛型--桥方法
因为 java 在编译源码时, 会进行 类型擦除, 导致泛型类型被替换限定类型(无限定类型就使用 Object). 因此为保持继承和重载的多态特性, 编译器会生成 桥方法. 本文最后附录所有源码. P ...
- canves 图片旋转 demo
<!DOCTYPE htmls> <html> <head> <title></title> <style> </styl ...
- hibernate+spring mvc, 解决hibernate 对象懒加载 json序列化问题
引用地址 在使用Spring MVC时,@ResponseBody 注解的方法返回一个有懒加载对象的时候出现了异常,以登录为例: @RequestMapping("login") ...