rem与px之间的换算(移动端)

最近因为工作接触到rem与px之间的换算,之前知道一些,不过还是比较笼统模糊,用起来不是很明白,后来自己查了点资料,以及亲自测试总算明白它们之间是怎么换算的了。

rem是一个相对值,它相对于根元素html,所以我们在使用的时候需要设置html的font-size值,内容大小就相对该值进行设置大小,比如,html的font-size为100px,内容的font-size想设置为20px,这换算为rem单位就是20/100=0.2rem。不过在开发中,html的font-size值会动态变化的,这样才可以自适应各种手机端,但我们可以把100px设置为最大值。html的font-size不只限于px单位,有的还使用了%,我在开发中就遇到这个,一开始我还不是了解,后来我查了一下才知道百分之几会有对应的像素值,比如62.5%对应的像素值是10px,75%对应的像素值是12px,这个是怎么算出来的呢?我们都知道,浏览器的默认字体大小是16px,那么16px对应的百分比就是100%,其他像素的百分比就是除以16得到的。

在没有设置html的font-size值时,rem就相对浏览器的font-size值,即16px。

   使用rem有什么好处呢?rem既然是一个相对值,那么我们就可以改变html的font-size值来动态改变页面内容的字体大小,宽高度,间距等等,这样就有了一个自由缩放的效果,在移动端就可以适配不同手机屏幕,所以在移动端就使用rem作为单位。

时间: 2024-12-22 22:35:35

rem与px之间的换算(移动端)的相关文章

移动端适配方案以及rem和px之间的转换

背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667). 2)对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:

em,pt和px之间的换算

任意浏览器的默认字体高度16px(16像素).所有未经调整的浏览器都符合: 1em=16px.那么12px=0.75em,10px=0.625em.为了简化font-size的换算,需要在css中的body选择器中声明font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了. 12px相当于9pt长度:12px相当于0.75em长度:9pt相当于0.7

在网页中,rem与px的换算

rem 是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位. 为什么web app要使用rem? 1.实现强大的屏幕适配布局: iphone6一下出了两款尺寸的手机,导致的移动端的屏幕种类更加的混乱,记得一两年前做web app有一种做法是以320宽度为标准去做适配,超过320的大小还是以320的规格去展示,这种实现方式以淘宝web app为代表作,但是近期手机淘宝首页进行了改版,采用了rem这个单位,首页以内依旧是和以前一样各种混乱,有定死宽度的页面,也有那种流式布局的页面. 我们现

像素、英寸、厘米之间的换算关系

72像素/英寸=28.346像素/厘米 300像素/英寸=118.11像素/厘米 1 厘米=0.3937 英寸 1 英寸=2.54 厘米   首先告诉大家一个不幸的消息:像素不能直接换算成英寸.厘米,要在dpi下才能换算! photoshop中两种分辨率换算 72像素/英寸=28.346像素/厘米 300像素/英寸=118.11像素/厘米 1 厘米=0.3937 英寸 1 英寸=2.54 厘米 以常见1024像素对比: 1024像素=3.413英寸=8.67厘米        (300像素/英寸

kbit和bit之间的换算关系

网络速率:用Kbps   Mbps   Gbps   或   Kb.   Mb.   Gb等来表示   1Gbps=1000Mbps   1Mbps=1000Kbps   1Kbps=1000bit 数据传输速率:用KBps   MBps   或KB.MB   .GB等来表示   1GB=1024MB   1MB=1024KB   1KB=1024Byte 1Byte=8bit 1kbps=1000bps 全称 :Bits   Per   Second 通信线路等数据传送速度的单位.比特每秒.1

常用px,pt,em换算表

常用px,pt,em换算表 pt (point,磅):是一个物理长度单位,指的是72分之一英寸. px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选.Windows系统默认是96dpi,Apple系统默认是72dpi. em(相对长度单位,相对于当前对象内文本的字体尺寸):是一个相对长度单位,最初是指字母M的宽度,故名em.现指的是字符宽度的倍数

各个秒之间的换算率

最近老遇到秒与秒之间的换算问题,现在总结如: 毫秒 millisecond 1ms 1毫秒=0.001秒=10-3秒 微秒 microsecond 1μs 1微秒=0.000001=10-6秒 纳秒 nanosecond 1ns 1纳秒=0.0000000001秒=10-9秒 皮秒 picosecond 1ps 1皮秒=0.0000000000001秒=10-12秒 飞秒 femtosecond 1fs 1飞秒=0.000000000000001秒=10-15秒

【转】 Android dp和px之间进行转换

在xml布局文件中,我们既可以设置px,也可以设置dp(或者dip).一般情况下,我们都会选择使用dp,这样可以保证不同屏幕分辨率的机器上布局一致.但是在代码中,如何处理呢?很多控件的方法中都只提供了设置px的方法,例如setPadding,并没有提供设置dp的方法.这个时候,如果需要设置dp的话,就要将dp转换成px了. 以下是一个应用类,方便进行px和dp之间的转换. import android.content.Context; public class DensityUtil { /**

Android中实现滑动翻页—使用ViewFlipper(dp和px之间进行转换)

Android中实现滑动翻页—使用ViewFlipper(dp和px之间进行转换) Android中dp和px之间进行转换 在xml布局文件中,我们既可以设置px,也可以设置dp(或者dip).一般情况下,我们都会选择使用dp,这样可以保证不同屏幕分辨率的机器上布局一致.但是在代码中,如何处理呢?很多控件的方法中都只提供了设置px的方法,例如setPadding,并没有提供设置dp的方法.这个时候,如果需要设置dp的话,就要将dp转换成px了. 以下是一个应用类,方便进行px和dp之间的转换.