css单位em、px、rem和pt的区别
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的区别的更多相关文章
- CSS中px,em,rem,pt的区别及四者换算?
本文章重要说明px,em,rem,pt的区别以及四者之间的换算. em单位有如下特点 1. em的值并不是固定的; 2. em会继承父级元素的字体大小. 我们在写CSS的时候如果要用em为单位,需要注 ...
- css单位中px和em,rem的区别
css单位中分为相对长度单位.绝对长度单位. 今天我们主要讲解rem.em.px这些常用单位的区别和用法. px(绝对长度单位) 相信对于前端来说px这个单位是大家并不陌生,px这个单位,兼容性可以说 ...
- css中单位em和rem
一.介绍 1.em w3cschool中给出css中尺寸单位如下: 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字体尺寸. 2em 等于当前字体尺寸的两倍. 例 ...
- 字体大小之px、em、rem、pt,字号详解
PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Pe ...
- css中单位em和rem的区别
在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...
- css3单位em,rem,px,vw,vh等
昨天发现了个好用的方法去设置手机端的rem单位,在这里记录下. html{ font-size:calc(100vw/7.5);} 这是按照750的设计稿(也就是iphone6的设计稿). 100vw ...
- 分清css的em和rem
在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...
- css 单位-px、em、rem、百分比
px像素(Pixel,像素px是相对于显示器屏幕分辨率而言的. em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于父级元素字体尺寸(若父级元素未指定f ...
- 【CSS单位】px、em、rem
1.PX为单位 在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,他改变了浏览器的字体大小,这时 ...
随机推荐
- POJ 2063 Investment 滚动数组+完全背包
题目链接: http://poj.org/problem?id=2063 题意: 你现在有现金m元,你要做n年的存款投资,给你k种投资方式,每种需要现金vi元,能获得xi元的理论,一年到期后你要利用拿 ...
- Java中的网络编程-1
计算机网络:将分布在不同地区的计算机与专门的外部设备用通信线路互连成一个规模大.功能强的网络系统, 从而使众多计算机 可以方便的互相传递信息, 共享硬件.软件.数据信息等资源. 计算机网络的主要功能: ...
- Hbase的安装和配置
1,准备好hbase的linux环境下的压缩包,这里hadoop版本为hadoop2.5.0,hbase版本为 2,解压缩这个版本,不选src的,其实两个任一都行 进入到hbase安装包目录,我这里的 ...
- Win2019 显示 SMBV1 协议不安全的处理
1. 登录有问题. 报错 [Window Title] \\10.100.1.163 [Content] \\10.100.1.163 因为文件共享不安全,所以你不能连接到文件共享.此共享需要过时的 ...
- 微信小程序组件 自定义单选
<view class='userperson'> <view class='f30 flexca'>请选择您的注册身份</view> <view class ...
- p2 关节
P2中使用Constraint及其子类表示关节,也就是将两个刚体按照指定的规则约束在一起,形成有规律的.相互限制的运动模拟.P2关节模拟中,两个刚体没有通过任何刚体连接,只是通过算法模拟出关节运动轨迹 ...
- delphi怎么单步调试
在delphi的IDE编辑窗口里,主菜单->Run->Step Over或者主菜单->Run->Trace Into单步调试有两种方式:一种是Step Over,快捷键是F8, ...
- HttpClient出现大量time_wait问题
在高并发短连接的TCP服务器上,当服务器处理完请求后立刻主动正常关闭连接.这个场景下会出现大量socket处于TIME_WAIT状态.如果客户端的并发量持续很高,此时部分客户端就会显示连接不上.我来解 ...
- 【bzoj3130】[Sdoi2013]费用流 二分+网络流最大流
题目描述 Alice和Bob做游戏,给出一张有向图表示运输网络,Alice先给Bob一种最大流方案,然后Bob在所有边上分配总和等于P的非负费用.Alice希望总费用尽量小,而Bob希望总费用尽量大. ...
- C++解析(18):C++标准库与字符串类
0.目录 1.C++标准库 2.字符串类 3.数组操作符的重载 4.小结 1.C++标准库 有趣的重载--操作符 << 的原生意义是按位左移,例:1 << 2;,其意义是将整数 ...