rem与px之间的转换

最近一直在写app，那今天就说一下rem与px之间的转换。

rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值，这个参考值设置为多少，完全可以根据您自己的需求来定。
所以这里总结一句，所谓依赖根元素来计算的方式，就是先给予html元素一个font-size，然后我们所有的rem就根据这个font-size来计算

例如：

html{ font-size:16px;}

那么我们这里的1rem就应该这么来计算：1x16=16px=1rem；浏览器默认为16px可能造成rem计算上的麻烦和多位小数，所以，我们也可以进行这种方式的初始化根元素：

html{font-size=62.5% //这里就是10/16x100%=62.5% 也就是默认10px的字号
}

这样初始化之后，我们来进行rem计算的时候，就会减少许多的麻烦。

下面是html根元素font-size为16px的对照表

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%; /* 10 ÷ 16 × 100% = 62.5% */，也就是10px的对照表

px	rem
12	12/10 = 1.2
14	14/16 = .875
16	4/10 = 1.4
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与px之间的转换相关推荐

摩客怎么设置安卓的dp_Android中dp和px之间进行转换
在xml布局文件中,我们既可以设置px,也可以设置dp(或者dip).一般情况下,我们都会选择使用dp,这样可以保证不同屏幕分辨率的机器上布局一致.但是在代码中,如何处理呢?很多控件的方法中都只提供了 ...
rem与px之间的换算
rem中r指的是root 即相对于根元素,这样就意味着,我们只需要在根元素确定一个参考值,这个参考值设置为多少,完全可以根据自己的需求来定. 我们知道,浏览器默认的字号16px 为了方便计算,时常将在 ...
dp、px之间单位转换Util
package com.example.admin.coursetabledemo;import android.content.Context; import android.util.Displa ...
与像素无关的dp单位与像素单位px之间的转换
package com.hujl.util; import android.content.Context; public class DensityUtil { /** * 根据手机的分辨率从 dp ...
android图片转换为二进制流,Android图片二进制与Bitmap、Drawable之间的转换
Android图片二进制与Bitmap.Drawable之间的转换 Java代码 public byte[] getBitmapByte(Bitmap bitmap){ ByteArrayOutput ...
屏幕适配中的dip与px之间的转化
在项目中,为了适配所有的屏幕,有时候会使用到dip和px之间的转换 dip 称为设备独立像素,在不同的移动设备上,有着不同的显示效果,与设备的显示器的单位像素点有关. px则是真是的物理像素,1px就 ...
像素之间的转换之 px与rem的转换
CSS3中的Rem值与Px之间的换算 bootstrap默认 html{font-size: 10px;} rem是一个相对大小的值,它相对于根元素总结: px转换成rem要除100 rem转换成p ...
css中的单位换算_CSS单位px、em、rem及它们之间的换算关系
作者:WangMin 格言:努力做好自己喜欢的每一件事国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者的区别与优势是什么?接下来我们就来学习一下吧! 单位px.em.rem分 ...
Sass基础——Rem与Px的转换
rem是CSS3中新增加的一个单位值,他和em单位一样,都是一个相对单位.不同的是em是相对于元素的父元素的font-size进行计算:rem是相对于根元素html的font-size进行计算.这样一 ...

rem与px之间的转换

rem与px之间的转换

最近一直在写app，那今天就说一下rem与px之间的转换。

下面是html根元素font-size为16px的对照表

下面是html根元素font-size为 62.5%; /* 10 ÷ 16 × 100% = 62.5% */，也就是10px的对照表

rem与px之间的转换相关推荐

最新文章

热门文章