HTML中的长度单位px、em、rem
搭建前端页面时,较为常用的长度单位就是px、em、rem。
1. px
px(pixel):相对长度单位,像素px是相对于显示器屏幕分辨率而言的。
特点
- IE无法调整哪些使用px作为单位的字体大小;
- 国外大部分网站嫩够调整的原因在于其使用了em或rem作为字体单位;
- Firefox能够调整px和em、rem,但是有大部分的国产浏览器使用IE内核。
2.em
em:相对长度单位,相对于当前对象内文本的字体大小。如果当前行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
任意浏览器的默认字体高都是16px,所有未经调整的浏览器都符合:1em=16px。则12px=0.75em,10px=0.625em。未来简化font-size的换算,需要在css中的body选择器中声明font-size=62.5%,这就使em的值变为16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是将原来的px值除以10,换上em做单位就行了。
特点
- em的值并不是固定的;
- em会继承父级的字体大小;
在写css时,需要注意三点:
- body选择器中声明font-size=62.5%;
- 将原来的px数值除以10,换上em作为单位;
- 重新计算那些被放大的字体的em数值,避免字体大小的重复声明。
3.rem
rem:rem是CSS3中新增的一个相对单位(root em)。其相对于根元素,只需要在根元素确定一个参考值。
特点
- rem相对单位,相对于根元素;
- 相对大小和绝对大小的优点于一身;
- 修改根元素就成比例的调整所有字体大小;
- 避免字体大小逐层复合的连锁反应
对于支持rem的浏览器,需要多写一个绝对单位声明,浏览器就会忽略用rem设定的字体大小。
P{font-size:14px;font-size:.5rem;}
**ps:**选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那就推荐使用rem,如果考虑兼容,那就使用px,或者两者都使用。
px、em、rem单位转换地址:http://pxtoem.com/
需要注意的一些问题:
1. 使用px设置字体大小时存在的问题:
当用户浏览web页面时,如果改变了浏览器的缩放,web页面的布局就会被打破。这样对于关心自己网站可用性的用户来说,就是一个大问题了,这时就可以使用“em”来定义web页面的字体。
2.
- 媒体查询中使用 rem 单位。
- 不要在多列布局中使用 em 或 rem ,改用%。
- 不要使用 em 或 rem,如果缩放会不可避免地导致要打破布局元素。
3.浏览器的兼容性
除了IE6-IE8,其它的浏览器都支持em和rem属性,px是所有浏览器都支持。
因此为了浏览器的兼容性,可“px”和“rem”一起使用,用"px"来实现IE6-8下的效果,然后使用“rem”来实现代浏览器的效果。
HTML中的长度单位px、em、rem相关推荐
- 认识css长度单位 px % em rem vh vw
目录 长度单位 px % em rem vh.vw 总结 长度单位 在日常的项目开发,在使用css样式进行时布局的时候,我们常常用到px.%.em这三个单位.CSS3开始,浏览器新增加了rem.vh. ...
- css中的单位换算_css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firef ...
- 网页布局中的 px,em,rem,pt
网页布局中的 px,em,rem,pt 设备像素:也叫物理像素,显示设备上最微小的物理部件. 比如 iphone 5:640 x 1136px. 不同的机型有不同的设备像素,固定死的. 这里需要讲一下 ...
- html 字号和像素的关系,一文搞懂CSS中的字体单位大小(px,em,rem...)
在学习的过程中,发现CSS有很多可以形容单位的尺寸.比方px,em,rem,vw等等.平常也没有深究,一来是没时间,二来是在我学习清单中优先级过低.一直想彻底弄明白,一直耽搁到现在.现在花上一点时间来 ...
- px,em,rem,vh,vw,vmin,vmax的区别
css手册中关于font-size是这么介绍的: font-size 值可以是绝对或相对值. 绝对值: 将文本设置为指定的大小 不允许用户在所有浏览器中改变文本大小(不利于可用性) 绝对大小在确定了输 ...
- CSS单位--px,em,rem,rpx区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? Px PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够 ...
- html移动端怎么做城市选择,移动端页面单位的选择(px, em, rem, vw)
px, em, rem的区别: px:绝对字体大小 em:基于一个基数来计算出相对字体大小.(移动端用的少) rem:基于根节点(html)的字体大小来计算. vw:可视区宽度单位.1vw等于可视区宽 ...
- em表示什么长度单位_html 常见的长度单位”px em pt” 简介说
摘要: 下文讲述常见的长度单位"px em pt"功能说明,如下所示: px.pt.em单位简介说明 px:像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言的国内推荐: ...
- vscode中如何将px转rem
在开发h5页面时,我们需要使用到rem单位,那么vscode中如何将px转rem呢? 此处我选择的是px to rem插件,使用步骤: 安装px to rem插件: 然后在设置->用户设置中-& ...
- 移动端页面单位的选择(px em rem)
移动端页面单位的选择(px em rem) 绝对单位: px 相对单位: rem em em具有继承性 继承自直接父类 所以说在移动端很少用 浏览器默认的字体大小 16px 那么 1em= ...
最新文章
- 3、LVS_TUN实现负载均衡
- ibatis运行流程
- POJ1083 Moving Tables
- xgboost与coo_matrix
- CImage类显示图片
- Ingress-nginx工作原理和实践
- cross_val_score 如何对孤立森林_【收藏】森林防火手抄报素材汇总!
- LINUX使用patchelf增加/修改rpath
- 海南大学信号与系统838考研经验(3)
- recover 没有捕获异常_Recover捕获异常
- matlab学习笔记 clc和clear
- 慢慢说计网:HTTP 长短连接
- 使用firewall-cmd限制ssh只能从指定IP段访问
- Kubernetes高可用性监控:Thanos的部署
- 2015武汉校园招聘归来
- 什么是验厂什么是认证
- 哪位科学家设计了第一架计算机器,奖-谁于哪年设计并创制了历史上第一架机械计算机器?(专搜竞答)...
- maven 打包war包时忽略一些配置文件
- python3 爬虫五大模块之三:网页下载器
- Qtum量子链创始人帅初:95%的项目在3年后,应该都不在
热门文章
- 中山大学计算机学院交换生去国外,中山大学取消与伯克利大学交换生项目
- 是非人生 — 一个菜鸟程序员的5年职场路 第8节
- win10找回图片查看器
- 2021-05-11 MongoDB面试题 MySQL与MongoDB之间最基本的差别是什么
- DRM驱动(五)之drm_atomic_state
- cad怎么选择一个对象打散vba_CADVBA中的选择集过滤.doc
- hive登录失败的问题解决
- NGS数据分析实践:03. 涉及的常用数据格式[4] - bed和Wiggle/Bigwig/bedgraph格式
- juc并发编程学习(一)
- python绘制樱花洒落_Python:绘制樱花树