em,rem,px之间的转换

::>_<::我们在写css样式时,经常会遇到字体大小在不同的浏览器不同的设备上显示不一致的情况,一般有这几种单位可供开发者选择:em,rem,px。下面我就介绍一下这几种单位

一、px:是像素(Pixel)的简写。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

PX特点:

1、 IE无法调整那些使用px作为单位的字体大小;

2、 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;

3、 Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。

二、em:是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

1、任意浏览器的默认字体高都是16px。

所有未经调整的浏览器都符合: 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作为单位就行了。

所以我们在写CSS的时候,需要注意两点:

a. body选择器中声明Font-size=62.5%;

b. 将你的原来的px数值除以10,然后换上em作为单位;

2、重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

em特点

(1)、 em的值并不是固定的;

(2)、 em会继承父级元素的字体大小。

三、rem:是css3新增的一个相对单位(root em,根em)

rem,这个单位引起了广泛关注。这个单位与em有什么区别呢?

区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反 应。

目前,除了IE8及更早版本外,所有浏览器均已支持rem。

对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略 用rem设定的字体大小。

PS:下面是一个px,em,rem单位转换工具

http://pxtoem.com/

时间: 2024-10-19 09:55:01

em,rem,px之间的转换的相关文章

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

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

css中字体单位px,pt,em ,rem,百分比之间的区别和用法

css中字体单位px,pt,em ,rem,百分比之间的区别和用法 px 即像素,一般国内网站使用较多,默认大小是16px; pt 印刷行业常用单位 em  相对单位,相对父元素属性的单位 ,一般用于移动端布局 rem  结合相对定位和绝对定位的优势,相对根元素html,想要修改字体大小,只要修改html的大小就可以了 转换公式: pt=px乘以3/4 倍数em=倍数x16px 注意:1em=16px.那么12px=0.75em,10px=0.625em.   1.em的用法 在代码重写的过程中

响应式——em,rem,px

进一步了解了em,rem,px PX像素,相对长度单位.像素px是相对于显示器屏幕分辨率而言的,在做Web页面时,我们都用px来设置文本,px比较稳定和精确,但是这种方法有一问题,就是当用户在浏览器中浏览我们做的Web网页时,它改变了浏览器的字体大小,这会使用我们的Web页面布局被打破.这时就可以用em来定义Web页面的字体. EM也是相对长度单位,相对于当前对象文本的字体尺寸,如果当前对文本的字体大小没有被设置,就相当于浏览器的默认字体尺寸. 任意浏览器的默认字体高都是16px em需要一个参

【转】 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之间的转换.

Android开发中dp,sp和px之间的转换

本文转载于 http://blog.csdn.net/student9128/article/details/53932470 众所周知,在Android开发中dp和px,sp和px之间的转换时必不可少的,下面将转换的代码记录下来: 1 public class DisplayUtils { 2 /** 3 * convert px to its equivalent dp 4 * 5 * 将px转换为与之相等的dp 6 */ 7 public static int px2dp(Context

Android中dp和px之间进行转换

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

常见的网页单位:em/rem/px/%/vm/vh

px:像素 px单位的名称为像素,它是一个固定大小的单元,像素的计算是针对(电脑/手机)屏幕的,一个像素(1px)就是(电脑/手机)屏幕上的一个点,即屏幕分辨率的最小分割.由于它是固定大小的单位,单独用它来设计的网页,如果适应大屏幕(电脑),在小屏幕(手机)上就会很不友好,做不到自适应的效果. em:相对长度单位 em单位用的也比较多,特别是国外:em单位的名称为相对长度单位,它是用来设置文本的字体尺寸的,相对于父级元素对象内文本的字体尺寸:如果没有人为设置当前对象内文本的字体尺寸,那么它相对的

Android中dip(dp)与px之间单位转换

px   :是屏幕的像素点in    :英寸mm :毫米pt    :磅,1/72 英寸dp   :一个基于density的抽象单位,如果一个160dpi的屏幕,1dp=1pxdip  :等同于dpsp   :同dp相似,但还会根据用户的字体大小偏好来缩放.建议使用sp作为文本的单位,其它用dip 针对dip和px 的关系,做以下概述: QVGA屏density=120:          QVGA(240*320) HVGA屏density=160:          HVGA(320*480