认识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它绝对是 ...
随机推荐
- IE8 通过Jquery动态修改html不显示的问题
for (var i = 0; i < _priority_transf.length && i < xmlList.length; i++) { if (textCont ...
- iOS：集合视图UICollectionView、集合视图控制器UICollectionViewController、集合视图单元格UICollectionViewCell(创建表格的另一种控件)
两种创建表格方式的比较:表格视图.集合视图(二者十分类似) <1>相同点: 表格视图:UITableView(位于storyboard中,通过UIViewController控制器实现 ...
- MYSQL三个默认库的介绍
数据库INFORMATION_SCHEMA:提供了访问数据库元数据的方式. 元数据是关于数据的数据,如数据库名或表名,列的数据类型,或访问权限等.有些时候用于表述该信息的其他术语包括“数据词典”和“系 ...
- hybrid app开发中用到的html5新特性localStorage、sessionStorage和websql database
近期在项目中进行hybrid app开发,项目中有大量的js代码执行在android设备上. 使用到了非常多HTML5的新特性,之前没有遇到过,不了解.这里记录下添加点前端的知识.混合式app开发中. ...
- FrameWork数据权限浅析4之基于多维度配置表实现行级数据安全
日子过得好苦逼,我过的很好,只是缺少￥.时间在变,而问题始终未变,你解不解决它都在那里一动不动.不知不觉已经发现手机的中央,电脑的右下角已经出现了201411的字样,突然从桌子上爬起来,差点忘记了自己 ...
- （剑指Offer）面试题49：把字符串转换为整数
题目: 将一个字符串转换成一个整数,要求不能使用字符串转换整数的库函数. 思路: 考虑+.-.空格.非数字字符,以及溢出问题 代码: #include <iostream> using n ...
- C#基础视频教程7.4 如何编写简单游戏
接下来我们实现整个的游戏流程,当点击开始游戏,则需要三个事情开始运行 1 小鸟初始化并往下掉(当然还是可以用按钮让他飞一下) 2 每隔一定时间从左侧产生一个管子(宽度和高度随机,产生周期2000ms左 ...
- 对hadoop 执行mapreduce时发生异常Illegal partition for的解决过程
来自:http://blog.csdn.net/hezuoxiang/article/details/6878026 写了个mapreduce的JAVA程序,自定义了个partition class ...
- TP模板中如何使用函数
TP模板中如何使用函数 TP中如何将时间戳转换为时间显示 我们往往需要对模板输出变量使用函数,可以使用: {$data.name|md5} 编译后的结果是: <?php echo (md5($d ...
- postgres时间转换函数
函数 返回类型 描述 例子 to_char(timestamp, text) text 把时间戳转换成字串 to_char(current_timestamp, 'HH12:MI:SS') to_ch ...