单位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是相对长 ...
随机推荐
- Sql Server 2008 【存储过程】 死锁 查询和杀死
1 . 使用数据库中,可能出现死锁, 导致程序 无法正常使用. Create procedure [dbo].[sp_who_lock] ( @bKillPID Bit=0 -- 0: 查询 1: 结 ...
- 教你如何理解JAVA的I/O类库
花括号MC(huakuohao-mc):关注JAVA基础编程及大数据,注重经验分享及个人成长. Java 的 I/O 流,说简单也简单,说复杂也复杂.复杂是因为进行一次常规的文件 I/O 操作通常要用 ...
- java.lang.ClassCastException:java.util.LinkedHashMap不能转换为com.testing.models.xxx
后台接收前台的json字符串 转pojo 问题(Object 对应定义的pojo) ObjectMapper mapper=new ObjectMapper(); Object object = ma ...
- GUI之JavaFX
一.JavaFX不深究系列,目的只是为了尝试使用GUI的方式来生成桌面应用. 二.JavaFX是一个强大的图形和多媒体处理工具包集合,它允许开发者来设计.创建.测试.调试和部署富客户端程序,并且和Ja ...
- Spring mvc拦截器防御CSRF攻击
CSRF(具体参考百度百科) CSRF(Cross-site request forgery跨站请求伪造,也被称为“One Click Attack”或者Session Riding,通常缩写为CSR ...
- 关于BaseServlet的使用
一篇很棒的参考 https://blog.csdn.net/weixin_42425970/article/details/84279257
- Web项目运行时tomcat服务器启动失败
在实现项目的过程中,tomcat服务器启动失败的情况本人遇到了三种: 1.tomcat服务器的端口被占用. 可能的原因:a.服务器已经启动的时候你又一次启动了服务器 b.别的服务占用了服务器的端口(一 ...
- 如何在Mac OS X上将PDF转换为Microsoft Word
Lighten PDF to Word Converter for Mac是一个简单但功能强大的应用程序,可将PDF文件准确,轻松地转换为Microsoft Word.它可以保留原始内容的布局,格式, ...
- 1315E Double Elimination DP 01枚举状态和倍增思想
E. Double Elimination DP 01枚举状态和倍增思想 题意 参考DOTA2双败赛制,一共有\(2^n\)个队打n轮 其中你有k喜欢的队伍,由你掌控比赛的输赢请问比赛中包含你喜欢的队 ...
- sqli-labs less-5 --> less-6
盲注笔记: SQL盲注攻击:只有两种回显结果,错误和正确:无法用url查询爆出数据库的信息:回显注入语句中加入判断方式,使得回显结果为true或者false: SQL盲注分类:布尔盲注,时间盲注,报错 ...