详细讲解css单位px,em和rem的含义以及它们之间的区别
一.首先介绍一下px
px就是css中最基本的长度单位了,用px做单位基本上没什么问题,可以做到让页面按套路精确的展现!
可但是!但可是!如果全篇用px布局会暗藏一个蛋疼的问题,就是当用户和Ctrl滚页面的时候(说白了就是ctrl+,ctrl-),你会发现页面结构产生了不可预知的错乱,因此有砖家倡导使用em替代px。。。。。
二.接下来介绍一下em
如果你从上到下阅读此文,你应该已经知道了em出现的原因,下面说说em的特性,简单的讲px是绝对单位,1px就是1px,2px就是2px,以此类推,而em是相对单位,em相对的基准点就是浏览器的字体大小,浏览器默认字体大小是16px,也就是1em默认等于16px,如果你想给某个文字设定为14px,就这样写 font-size:0.875em; 公式是14/16=0.875em,如果想要15px,那么就是15/16=0.938em, 例如margin:0.938em; 依次类推,样式表都用em来写的话,就可以解决ctrl+,ctrl-时造成的页面错乱问题,常用em对照表如下
这时候有人和我一样就会抱怨了,我的数学是体育老师教的,除以16我怎么可能算明白,那好办你可以在根节点<html>上重定义基准字号 html {font-size:62.5%} ,此时页面基准字号就是 16px * 62.5% = 10px , 那么此时 1em = 10px,那么此时14px = 1.4em,15px=1.5em,依次类推,就算你数学是要饭的教的应该也会算了吧-。-!
可但是!但可是!问题又来了,em准确的说是相对于父节点的字号来计算的,如果自身定义了字号那么就相对自身字号来计算,举例如下:
html { font-size: 100%; } .box-0 {height: 1em; /* 此时height等于16px */ } .box-1 { font-size: 0.625em; /* 此时基准字号以变更为16*0.625=10px */ height: 1em; /* 此时实际height等于10px */ }
看明白了吧,在整个页面内1em并不是一个固定不变的值,1em不停的变换,再加上数学是体育老师教的,这不是自作孽吗。。。没关系,css3为我们引入一个新的单位就是rem可以解决这个问题
三.最后介绍一下主角rem
rem和em一样也是一个相对单位,为了方便理解,我们就理解rem为root em,顾名思义rem只相对跟节点<html>计算,这就是说只要在根节点设定好参考值,那么全篇的1rem都相等,计算方式同em,默认1rem=16px; 同理你可以设定html { font-size:62.5% } 那么1rem就等于10px,以此类推。。。
声明一下:rem是css3属性,没错!这就是说屌丝ie678不支持rem属性,只有chrome、firefox等高富帅支持!那么我们就在ie678中用px做兼容处理,例如:
.box {font-size: 14px; /* 用来兼容ie678 */font-size: 0.875em; }
转载于:https://www.cnblogs.com/chris-oil/p/4203717.html
详细讲解css单位px,em和rem的含义以及它们之间的区别相关推荐
- CSS单位--px,em,rem,rpx区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? Px PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够 ...
- css自动转rem,css之px自动转rem—“懒人”必备
作为一名前端开发,尤其是在做移动端适配时,rem是我们经常用到的单位,它的好处大家可以自行搜索,网上已经有很多了. 但是我们再将设计稿上的px转换成rem时,得手动的去计算,这是一个很耗时.费力的过程 ...
- css中的单位换算_css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firef ...
- CSS单位 px pt em和rem 之间的区别
CSS中可以定义大小的单位有四种px,pt,em,rem,而px可以说在网页开发中最常见的单位了.不过现在如今的大多数网站已经开始用rem这个单位了.那么这四个单位有什么区别呢? px|pt|em|r ...
- Css单位px,rem,em,vw,vh的区别
Css单位px,rem,em,vw,vh的区别 px 像素 rem 根元素字体大小 应用场景 使用和修改 em 相对于父元素的大小 % 相对长度单位 vw.vh 相对于视口的单位 视口 VW 相对于视 ...
- 一个CSS的px值转rem值的Sublime Text 3自动完成插件
一个CSS的px值转rem值的Sublime Text 3自动完成插件. 插件效果如下: 安装 下载本项目,比如:git clone https://github.com/flashlizi/cssr ...
- css之px自动转rem—sublime 插件CSSREM
CSSREM CSSREM 是一个CSS的 px 值转 rem 值的Sublime Text3自动完成插件.先来看看插件的效果: 一个CSS的px值转rem值的Sublime Text 3自动完成插件 ...
- 设备像素、css像素、设备独立像素、dpr、ppi 之间的区别?
面试官:说说设备像素.css像素.设备独立像素.dpr.ppi 之间的区别? 一.背景 在css中我们通常使用px作为单位,在PC浏览器中css的1个像素都是对应着电脑屏幕的1个物理像素 这会造成一种 ...
- css单位介绍em ex ch rem vw vh vm cm mm in pt pc px
长度单位主要有以下几种em ex ch rem vw vh vm cm mm in pt pc px %,大概可以分为几种"绝对单位"和"相对单位"和" ...
最新文章
- paypal提现软件_PayPal软件工程师生命中的一天
- Linux动态频率调节系统CPUFreq之一:概述【转】-- 非常好的博客
- 我国将明确侵犯个人信息定罪及量刑标准
- php之常用字符串方法
- 《中国人工智能学会通讯》——12.58 大数据不确定性学习的研究
- PostgreSQL非交互式键入密码
- java stl分解_Java Thread 之間 記憶體空間分析
- PostgreSQL的 initdb 源代码分析之十
- 怎样控制小程序tabbar图标大小_微信小程序设计规范经验分享
- java多线程开发--语法糖之synchronized关键字
- 关于 QueryDSL 配置和使用(详细)
- Hi3516A开发--电阻分压阻值计算
- Excel 数据处理基础
- 南阳理工计算机与信息工程学院,南阳理工学院计算机与信息工程学院
- 让你大吃一惊的国外广告联盟
- |9 其他(linux特定的), 用来存放内核例行程序的文档.,Linux常用操作指令
- WAIC直击:商汤科技展示AI应用落地最新成果
- 交互式多模型-无迹卡尔曼滤波IMM-UKF算法matlab实现(跟踪场景二)
- 英语Canutillos祖母绿canutillos单词
- 网络尖兵让共享ADSL失去了自由【转】