rem与px的转换
rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值，这个参考值设置为多少，完全可以根据您自己的需求来定。
我们知道，浏览器默认的字号16px，来看一些px单位与rem之间的转换关系：
| px | rem |
------------------------
| 12 | 12/16 = .75 |
| 14 | 14/16 = .875 |
| 16 | 16/16 = 1 |
| 18 | 18/16 = 1.125 |
| 20 | 20/16 = 1.25 |
| 24 | 24/16 = 1.5 |
| 30 | 30/16 = 1.875 |
| 36 | 36/16 = 2.25 |
| 42 | 42/16 = 2.625 |
| 48 | 48/16 = 3 |
-------------------------
为了方便计算，时常将在<html>元素中设置font-size值为62.5%:
相当于在<html>中设置font-size为10px，此时，上面示例中所示的值将会改变：
| px | rem |
-------------------------
| 12 | 12/10 = 1.2 |
| 14 | 14/10 = 1.4 |
| 16 | 16/10 = 1.6 |
| 18 | 18/10 = 1.8 |
| 20 | 20/10 = 2.0 |
| 24 | 24/10 = 2.4 |
| 30 | 30/10 = 3.0 |
| 36 | 36/10 = 3.6 |
| 42 | 42/10 = 4.2 |
| 48 | 48/10 = 4.8 |
-------------------------
由于rem是css3中的一个属性，很多人首先关注的就是浏览器对他的支持度，我截了一张caniuse对rem属性的兼容表：
从上图可以清楚的知道，rem在众多浏览器中都已得到很好的支持，如果您的项目不用考虑IE低版本的话，你就可以放心的使用了。
rem与px的转换的更多相关文章
- Rem与Px的转换[转载]
原文:http://www.w3cplus.com/preprocessor/sass-px-to-rem-with-mixin-and-function.html rem是CSS3中新增加的一个单位 ...
- 转: rem与px的转换
rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值,这个参考值设置为多少,完全可以根据您自己的需求来定.· 我们知道,浏览器默认的字号16px,来看一些px单 ...
- Sass基础——Rem与Px的转换
rem是CSS3中新增加的一个单位值,他和em单位一样,都是一个相对单位.不同的是em是相对于元素的父元素的font-size进行计算:rem是相对于根元素html的font-size进行计算.这样一 ...
- 移动端适配方案以及rem和px之间的转换
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
- 自动把网页px单位转换成rem
自动把网页px单位转换成rem 首先在你的项目开发环境中安装2个插件 然后在vue.config.js文件引入并重新启动服务器 这样就配置成功了,一起看看效果
- vue换算单位px自动转换rem
cnpm i postcss-px2rem --save cnpm install px2rem-loader --save 2.配置px2rem build目录下vue-loader.conf.js ...
- EM vs REM vs PX，为什么你不应该”只用px“”
Actually this artical is from other person's opnion ,i just put it into chinese,and this means a ver ...
- 使用em和rem替代px
rem是指根元素的字体大小,默认情况下html的字体大小为:16px=1rem.而em是相对单位,是基于它的祖先元素计算的. 如果我们不指定html和body的字体大小,要得到12px的rem需要这样 ...
- android 手机屏幕有关的几个工具(屏幕宽高,dp和px互相转换)
平时适配页面时经常会需要根据屏幕的宽高来设置控件的大小,很多时候在代码中还会需要dp和px互相转换. 今天把最常用的几个记录一下,经测试包括2.3 ~ 5.0之间的版本都可用,其他版本未测,不过应该也 ...
随机推荐
- C# 4.0四大新特性代码示例与解读
摘要:今天我们结合代码实例来具体看一下C#4.0中的四个比较重要的特性. 之前的文章中,我们曾介绍过C#的历史及C# 4.0新增特性,包括:dynamic. 命名和可选参数.动态导入以及协变和逆变等. ...
- css3实现圆形逐渐减少动画
写这个动画刚开始完全没有思路,后来参考网上的资料发现可以用半圆实现,具体原理如下: 1.,一个div作为背景,三个div做出三个半圆出来,一个用于旋转,一个靠左(用于与背景吻合),一个靠右(用于与背景 ...
- 如何获取ResultSet的行数和列数
当我们执行数据库查询返回一个ResultSet的时候,很多情况下我们需要知道这个ResultSet的大小,即它的行数和列数.我们知道它的列数可以通过resultSet.getMetaData().ge ...
- MsSQLserver中修改字段值系统自动生成的脚本
主要参考一下脚本的实现思路: ①创建临时表 ②创建临时表 ③向临时表插入数据 ④删除原表 ⑤临时表改名 /* 为了防止任何可能出现的数据丢失问题,您应该先仔细检查此脚本,然后再在数据库设计器的上下文之 ...
- solr 查询 实例分析
solr索引查询接口:http://localhost:8080/solr/query 首先了解一下查询参数的含义. q Solr 中用来搜索的查询.可以通过追加一个分号和已索引且未进行断词的字段(下 ...
- UE4 AI BehaviorTree 各个节点执行顺序总结
一个游戏DEMO的AI部分 用到行为树组件如上 主要说一下这两个组件 一个装饰(类似过滤器) 一个服务(代码逻辑与Blackboard交互) Service分为 大碰撞 和 小碰撞 两个碰撞范围, 大 ...
- XVII Open Cup named after E.V. Pankratiev. GP of SPb
A. Array Factory 将下标按前缀和排序,然后双指针,维护最大的右边界即可. #include<cstdio> #include<algorithm> using ...
- Easyui Ajax验证Form表单。。。
今天做项目用到easyui Ajax验证表单.本想自定义一个easyui的验证,查资料发现easyui 自带了一个通用的验证!见以下下截图. 后台返回值 true验证通过,返回false验证失 ...
- tornado 学习笔记17 HTTPServerRequest分析
代表Http请求. 所有的属性都是字符串型. 17.1 属性 (1) method:请求方法类型,比如"GET"."POST" (2) ur ...
- java 测试：iterator foreach for 三种迭代方式哪种更快？
代码: public class main { public static void main(String[] p_args){ ArrayList<String> _l_string ...