px em rem 的区别

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

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

4.px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em特点 
1.em的值并不是固定的;

2.em会继承父级元素的字体大小。

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

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

rem特点 
1.rem是CSS3新增的一个相对单位(root em,根em),这个单位与em区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。使用方法:

html{font-size:62.5% } //1rem = 10px;

p {font-size:12px; font-size:1.2rem;}

也可以写响应式布局,所有东西(包括文字大小)大小会随着屏幕的变化也变化,不需要媒体查询就能做到,如下代码即可

document.documentElement.style.fontSize || document.body.style.fontSize = innerWidth/16 + 'px';
window.onresize = function(){
	document.documentElement.style.fontSize || document.body.style.fontSize = innerWidth/16 + 'px';
}

这样即可兼容响应式的布局,后面的innerWidth/16表示将屏幕的宽度分为16份,文字大小为一份即1rem,拿iphone5来举例,它的宽度为320px,那么1rem = 20px;

时间: 2024-08-03 19:06:23

px em rem 的区别的相关文章

学入分析css中px、em和rem单位区别

国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核).  px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册)em是相对长度单位.相对于当前对象内文本的字体尺寸.

css中单位px和em,rem的区别

  px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸. 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px.那么12px=0.75em,10px=0.625em.为了简化font-size的换算,需要在css中的body选择器中声明 Font-size=62.5%,这就使em值变为 16px*62.5%=10px,

CSS长度单位的区别 - pt,px和cm的区别

在CSS样式表中,我们经常会看到pt, px,em,ex ,in等这类长度单位.它们各是什么意思,有什么区别呢? 我又写了另外一个HTML例子,测试一下cm. 在CSS样式表中,长度单位分两种: 相对长度单位,如px, em等 绝对长度单位,如pt,mm等 也谈px和pt的区别 经常看 到有人拿px和pt比较,主要是为了争辩在确定字体大小(font-size)或其它CSS属性大小时,用什么样的CSS长度单位更加好.有人说,用pt更好,因为pt是绝对长度单位,不会因为屏幕分辨率大小,或者其它因素而

常用长度单位PX/EM/PT/百分比转换

PX.PT.EM.ex和in等都是我们常用的长度单位,尤其在网页的字体大小中经常用到.但是你知道PX .PT和EM之间是如何进行准换的吗?这里icech为大家找到了一个px.pt.em和percent大小转换的一个 表格,尤其针对字体大小的转换十分方便.希望大家能够喜欢! PX和PT转换的公式: 以前在文章中介绍过PX和PT的转换规则,其实很简单,pt=px乘以3/4.比如12px×3/4=9pt大小 . PX和em转换的公式: 对于PX转em的方法也类似,就是em=16乘以px,也就是说1.5

Android中px和dip的区别

在Android手机的诞生之初,由于Android系统是开源的,一开始便有众多的OEM厂商对Android手机进行深度定制,于是乎Android手机的皮肤和屏幕大小都变得百花齐放,这可苦逼了我们这群开发者,因为我们被要求要注意写出一个好的Android软件,写一次代码就能适应大小不同的屏幕.这就好比,你做了一套衣服,要让不同身材的人都穿得合身,类似于生活中的道理,我们这套衣服肯定不能用没有弹性的布料,所以我们要像生活中那种无尺码,有弹性的衣服学习,在代码里面尽量让界面能够自动适应屏幕的大小,幸好

CSS代码中px与pt的区别

pt 是个绝对单位,1 pt =1/72 英寸 一个是设备坐标,一个是逻辑坐标,两者是不同的. px是个相对单位,一般像素的参考值为:在一个像素密度是90 pdi的显示器上,正常人从距离显示器28英寸处看一个像素的视角应该不小于0.0227度.   1   px定义的在设置为大字体之后不会变:pt定义的会变 2   px是相对单位,pt是绝对单位 如果大家做网页是为了浏览而不是印刷,建议大家用 px 来定义字号,理由如下:1. 如前面 Jet 所述,px 指的是象数,象数这个概念本身就是为了显示

Android dip,px,pt,sp 的区别详解_Android

dip: device independent pixels(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGA.HVGA和QVGA 推荐使用这个,不依赖像素. px: pixels(像素). 不同设备显示效果相同,一般我们HVGA代表320x480像素,这个用的比较多.pt: point,是一个标准的长度单位,1pt=1/72英寸,用于印刷业,非常简单易用:sp: scaled pixels(放大像素). 主要用于字体显示best for textsize

Android dip,px,pt,sp 的区别详解

dip: device independent pixels(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGA.HVGA和QVGA 推荐使用这个,不依赖像素. px: pixels(像素). 不同设备显示效果相同,一般我们HVGA代表320x480像素,这个用的比较多.pt: point,是一个标准的长度单位,1pt=1/72英寸,用于印刷业,非常简单易用:sp: scaled pixels(放大像素). 主要用于字体显示best for textsize

H5移动端知识点总结

阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解display:box的布局 理解flex布局 Flex布局兼容知识点总结 回到顶部 移动开发基本知识点 一. 使用rem作为单位 html { font-size: 100px; } @media(min-width: 320px) { html { font-size: 100px; } } @media(min-width: 360px) { html { font-size: 112.5px; } }