1、PX :像素(Pixel) 
PX是相对长度单位,它是相对于显示器屏幕分辨率而言的。 
优缺点:比较稳定和精确,但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况。

2、EM:是相对长度单位。 
EM是相对于父元素来设计字体大小的。如果当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。 
优缺点:EM的值并不是固定的,它会继承父级元素的字体大小。

EM和PX的之间的相互转换: 
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。 
为了使用方便,用em时,我们通常在CSS中的body选择器中声明font-size=62.5%(使em值变为 16px*62.5%=10px), 之后,你只需要将你使用的px值除以10,即可得到em值,如:12px=1.2em, 10px=1em。

3、REM :是CSS3新增的一个相对单位(root em,根em) 
REM是相对单位,是相对HTML根元素。 
这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。 目前,除了IE8及更早版本外,所有浏览器均已支持rem。

4、PT :印刷业上常使用的单位 
PT是磅的意思,一般用于页面打印排版。

css单位em、px、rem和pt的区别的更多相关文章

  1. CSS中px,em,rem,pt的区别及四者换算?

    本文章重要说明px,em,rem,pt的区别以及四者之间的换算. em单位有如下特点 1. em的值并不是固定的; 2. em会继承父级元素的字体大小. 我们在写CSS的时候如果要用em为单位,需要注 ...

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

    css单位中分为相对长度单位.绝对长度单位. 今天我们主要讲解rem.em.px这些常用单位的区别和用法. px(绝对长度单位) 相信对于前端来说px这个单位是大家并不陌生,px这个单位,兼容性可以说 ...

  3. css中单位em和rem

    一.介绍 1.em w3cschool中给出css中尺寸单位如下: 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字体尺寸. 2em 等于当前字体尺寸的两倍. 例 ...

  4. 字体大小之px、em、rem、pt,字号详解

    PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Pe ...

  5. css中单位em和rem的区别

    在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...

  6. css3单位em,rem,px,vw,vh等

    昨天发现了个好用的方法去设置手机端的rem单位,在这里记录下. html{ font-size:calc(100vw/7.5);} 这是按照750的设计稿(也就是iphone6的设计稿). 100vw ...

  7. 分清css的em和rem

    在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...

  8. css 单位-px、em、rem、百分比

    px像素(Pixel,像素px是相对于显示器屏幕分辨率而言的. em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于父级元素字体尺寸(若父级元素未指定f ...

  9. 【CSS单位】px、em、rem

    1.PX为单位 在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,他改变了浏览器的字体大小,这时 ...

随机推荐

  1. 第二次作业——个人项目实战(sudoku)

    第二次作业--个人项目实战(sudoku) 一.作业要求地址 第二次作业--个人项目实战 二.Github项目地址 softengineering1--sudoku 三.PSP表格估计耗时 PSP2. ...

  2. asp.net如何实现跟踪检查用户知否查看了邮件。

    有时我们有这样一种需求场景,我们给很多用户发了邮件,需要一个反馈,用户是否查看了我们发送的邮件,百度了以下果然有方案. 我总结实践了下这个过程,同时有自己的一点使用感受.记录下希望对你有帮助. 有人想 ...

  3. OSG学习:LOD、数据分页、动态调度

    LOD(level of detail):是指根据物体模型的结点在显示环境中所处的位置和重要度,决定物体渲染的资源分配,降低非重要物体的面数和细节度,从而获得高效率的渲染运算.在OSG的场景结点组织结 ...

  4. tomcat下部署了多个项目启动报错java web error:Choose unique values for the 'webAppRootKey' context-param in your web.xml files

    应该是tomcat下部署了多个项目且都使用log4j. <!--如果不定义webAppRootKey参数,那么webAppRootKey就是缺省的"webapp.root". ...

  5. Eureka Server Replicate

    为了方便说明,就把上篇博客的图再贴一遍了. 上篇说道Application Service向Eureka Server注册服务的过程,在完成注册之后,由于Eureka Server是对等集群,其他Se ...

  6. 最简单的Linux下apache+mysql+php安装

    转载:http://www.jb51.net/article/29843.htm ubuntu下需要先更新系统后 流程笔记: 1.打开终端,输入“sudo apt-get install apache ...

  7. shell脚本如何获取当前时间

    在shell脚本里常常需要获取系统时间来处理某项操作,linux的系统时间在shell里是可以直接调用系统变量的如: 获取今天时期:`date +%Y%m%d` 或 `date +%F` 或 $(da ...

  8. 查看apk包名和Activity名

    今天遇到一个bug,比较有意思. 情景: 测试一个钻石提现功能,条件是账户里必须有价值等于或者超过50美元的钻石,才允许提现,否则无法进行下一步. 测试步骤: 提现页面输入一个小于50美元的提现金额, ...

  9. HDU 4758——Walk Through Squares——2013 ACM/ICPC Asia Regional Nanjing Online

    与其说这是一次重温AC自动机+dp,倒不如说这是个坑,而且把队友给深坑了. 这个题目都没A得出来,我只觉得我以前的AC自动机的题目都白刷了——深坑啊. 题目的意思是给你两个串,每个串只含有R或者D,要 ...

  10. 使用Appium上传/下载文件(push文件、pull文件)

    package com.lx.class1; import java.io.File; import java.io.IOException; import java.net.URL; import ...