px、em、rem单位间的区别
1. px
px是pixel的缩写,中文翻译是像素的意思;我们一般用来设置元素的宽高、字体大小,查了一下它不是自然界的长度单位。px是就是一张图片中最小的点,一张图就是由这些点构成的。1024px就是1024像素,如果是1024px×768px,也就是说水平方向上有1024个点,垂直方向上有768个点。谁能说出一个“点”有多长多大么?可以画的很小,也可以很大。如果点很小,那画面就清晰,我们称它为“分辨率高”,反之,就是“分辨率低”。所以,像素的大小是会“变”的,也称为“相对长度”;
特点:不会随着浏览器的大小改变而改变,只要设定就是个固定值。
2. em
em也是css中的相对单位,它是相对于父元素的字体大小来定的,如果你的父元素字体大小:font-size: 20px;那么子元素1em=20px; 如果父元素没有设置字体大小,那么会以浏览器默认的字体大小来定,浏览器默认字体大小是:font-size: 16px; 那么现在的1em=16px;
特点:会随着浏览器大小改变而改变。
3. rem
rem是root em的缩写,root的中文翻译是根的意思,在页面中只有一个html是根元素,所以是根据html来定的,如果设置:
html {
font-size: 25px;
}
那么1rem=25px;
特点:会随着浏览器的大小改变而改变。
px、em、rem单位间的区别相关推荐
- css px em rem % vw vh vm 区别
前言 在传统项目开发中,我们只会用到 px.%.em 这几个单位长度,它们可以适用大部分项目的开发,并且拥有较好的兼容性. 而从 css3 开始,浏览器对逻辑单位的支持又提升了新的境界,增加了 rem ...
- CSS单位--px,em,rem,rpx区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? Px PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够 ...
- px,em,rem,vh,vw,vmin,vmax的区别
css手册中关于font-size是这么介绍的: font-size 值可以是绝对或相对值. 绝对值: 将文本设置为指定的大小 不允许用户在所有浏览器中改变文本大小(不利于可用性) 绝对大小在确定了输 ...
- html移动端怎么做城市选择,移动端页面单位的选择(px, em, rem, vw)
px, em, rem的区别: px:绝对字体大小 em:基于一个基数来计算出相对字体大小.(移动端用的少) rem:基于根节点(html)的字体大小来计算. vw:可视区宽度单位.1vw等于可视区宽 ...
- css中的单位换算_css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firef ...
- 移动端页面单位的选择(px em rem)
移动端页面单位的选择(px em rem) 绝对单位: px 相对单位: rem em em具有继承性 继承自直接父类 所以说在移动端很少用 浏览器默认的字体大小 16px 那么 1em= ...
- html 字号和像素的关系,一文搞懂CSS中的字体单位大小(px,em,rem...)
在学习的过程中,发现CSS有很多可以形容单位的尺寸.比方px,em,rem,vw等等.平常也没有深究,一来是没时间,二来是在我学习清单中优先级过低.一直想彻底弄明白,一直耽搁到现在.现在花上一点时间来 ...
- 网页布局中的 px,em,rem,pt
网页布局中的 px,em,rem,pt 设备像素:也叫物理像素,显示设备上最微小的物理部件. 比如 iphone 5:640 x 1136px. 不同的机型有不同的设备像素,固定死的. 这里需要讲一下 ...
- 认识css长度单位 px % em rem vh vw
目录 长度单位 px % em rem vh.vw 总结 长度单位 在日常的项目开发,在使用css样式进行时布局的时候,我们常常用到px.%.em这三个单位.CSS3开始,浏览器新增加了rem.vh. ...
最新文章
- python 任务计时器 apscheduler.schedulers
- Spring 和 Spring Boot 最核心的 3 大区别,详解!
- MySQL杂记(更新时间——2014.05.23)
- 一种网络进程间通信的方式—— 管道
- 每天一道LeetCode-----计算二叉树的最大路径和,路径只需要从一个节点到达另一个节点,无其他要求
- python 按键精灵 离线_python,PyAutoGUI,自动操作鼠标键盘,类似按键精灵
- 网络编程(part8)--传输层服务之TCP和UDP
- Exaple2_1(显示转换)
- 集合使用与内部实现原理
- 电脑合上盖子不锁屏_笔记本电脑合上盖子或台式机离开后黑屏是“休眠”还是“睡眠”...
- wordpress入门基本操作,网站安全防护及常用插件(建站必看教程)
- 虚机里的vCenter 迁移
- IOUtils常用方法的使用
- Win7连接蓝牙耳机(千月蓝牙激活码分享)无需破解软件
- ul阻燃标准有几个等级_UL阻燃等级说明
- 最全的人力资源行业精美报表模板,免费下载啦
- 科学技术法-正则表达式-QT
- 卷积神经网络的网络结构——Hourglass
- Markdown语法图文详解
- 关于华为pad没有出来直播的经验