单位px和em,rem的区别
px
相对长度单位。像素(Pixel)。
像素是相对于显示器屏幕分辨率而言的。例如,WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。(css手册3.0)
em
相对长度单位。相对于当前对象内文本的字体尺寸。
如当前行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。 (css手册3.0)
google的默认字体高是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作为单位就行了。
rem
是css3新增的相对长度单位,相对于html根元素设置的文本尺寸单位。只需设置根元素尺寸,则内容所有字体可按比例调整大小。
对于需要适配各种移动设备,会使用rem长度单位,采用媒体查询方法获取分辨率设置html根元素大小。
/*移动端适配*/
@media screen and (min-width: 320px){
html{
font-size: 16px;
}
}
@media screen and (min-width: 360px){
html{
font-size: 18px;
}
}
@media screen and (min-width: 375px){
html{
font-size: 18.75px;
}
}
单位px和em,rem的区别的更多相关文章
- 彻底弄懂css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...
- CSS中单位px和em,rem的区别
PX特点: 1 IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...
- 彻底弄懂css中单位px和em,rem的区别 转的自己看
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...
- 弄懂css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小 ...
- 【转载】彻底弄懂css中单位px和em,rem的区别
原文链接:http://www.cnblogs.com/leejersey/p/3662612.html 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什 ...
- css中单位px和em,rem的区别[转载]
PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...
- [转]彻底弄懂css中单位px和em,rem的区别
难怪会问我 rem 和 em, 这俩或在移动端还是很有必要学习的. root em OK? 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? P ...
- 网页布局设计css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...
- px,em, rem的区别,在项目中怎么使用rem.
一.px px像素,绝对单位.像素px是相对于显示器屏幕分辨率而言的,是一个虚拟的长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度单位,需要指定精度DPI. 二.em em是相对长 ...
随机推荐
- Git操作:一次性强制push所有分支
现在手上有两个分支,master和rotation,想一次性推送所有分支,可以用--all参数来实现: git push --all origin 如果远程仓库有更改,但你需要直接推送,那就可以使用强 ...
- 笔记-Git基础
git配置 git config --global user.name "xxx" //配置用户名 git config --global user.email "xxx ...
- 【python基础语法】数字、布尔值(第1天课堂笔记)
# 导入模块 import keyword # print语句将内容输出到控制台 print("hello world!") # pep8编码规范 # 代码快速格式化快捷键:ctr ...
- mac电脑怎么投屏?教你选择适合自己的Mac投屏软件
mac上有什么好的投屏软件嘛?苹果手机ios投屏到mac用哪款投屏软件,mac投屏ipad该用哪款软件怎么操作,macdown小编给大家介绍的这几款Mac投屏软件,各有各的特色,总有一款适合你投屏. ...
- Zabbbix之十二------Zabbix实现微信报警通知及创建聚合图形
实战一:实现zabbix监控微信报警 1.在企业微信上注册账号 1.注册企业微信,管理员需要写上自己的真实姓名,扫描以下的二维码,与微信关联真实姓名. 2.登陆企业微信,然后创建一个微信故障通知应用 ...
- win7安装SQL Server 2005 的问题总结
SQL Server 安装程序无法连接到数据库服务进行服务器配置. 错误为: [Microsoft][SQL Native Client]客户端不支持加密. 有关详细信息,请参阅服务器错误日志和安装日 ...
- PP: Unsupervised anomaly detection via variational auto-encoder for seasonal KPIs in web applications
Problem: unsupervised anomaly detection for seasonal KPIs in web applications. Donut: an unsupervise ...
- Python_3
""" Function_1: 寻找水仙花数. 水仙花数也被称为超完全数字不变数.自恋数.自幂数.阿姆斯特朗数, 它是一个3位数,该数字每个位上数字的立方之和正好等于它本 ...
- 如何开发自己的第一个 Serverless Component
前言 上一篇 基于 Serverless Component 的全栈解决方案 介绍 Serverless Component 是什么和如何使用 Serverless Component 开发一个全栈应 ...
- C# 中indexOf、lastIndexOf、subString方法的理解
一.indexOf() indexOf("\\"):返回"\\"字符在此实例中第一个出现的索引位置,实例的下标是从0开始,如果未找到则返回-1. indexOf ...