px和em,rem的区别
1、px是你屏幕设备物理上能显示出的最小的一个点,这个点不是固定宽度的,不同设备上点的长宽、比例有可能会不同。假设:你现在用的显示器上1px宽=1毫米,但我用的显示器1px宽=两毫米,那么你定义一个div宽度为100px,你显示器上看这个div是10厘米,我显示器上看是20厘米。另外一个px点的长宽不一定是1:1的正方形,有的设备上长宽比是不一样的。
2、em尺寸:所有现代浏览器下默认字体尺寸是16px,这时1em=16px。然后你人为的把body里面定义font-size:12px;(把浏览器默认16px改小了),此刻1em=12px,如果0.8em实际等于12px*0.8;em的用处是你要整个网页字体统一变大变小你只要改body里面font-size的值就行了。
另外:em会继承父元素的字体大小,比如:body{font-size: 16px;}p{font-size:0.75em;}span{font-size:2em;}
<html>我大小为16px;<p> 段落文字大小为12px(16*0.75); <span> 我大小是2em,即24px,这里是相对父级字号*2的,而不是相对body里面的16px </span></p></html>
3、Rem,上面你看到了,em相对父级,嵌套一多了算字体到底多大就很操蛋,所以有了Rem(浏览器支持还不是很理想),他只相对html或body的字体尺寸(默认还是16px,除非你自己用font-size定义为其他),没有了继承父级尺寸这个关系。
转自baidu知道
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是相对长 ...
- css单位中px和em,rem的区别
css单位中分为相对长度单位.绝对长度单位. 今天我们主要讲解rem.em.px这些常用单位的区别和用法. px(绝对长度单位) 相信对于前端来说px这个单位是大家并不陌生,px这个单位,兼容性可以说 ...
随机推荐
- 大朋展翅 html5上传图片(三)一解决部分手机拍相册批量上传图片转向问题
在经过前面的改进之后本来以为已经没有问题了,但经过我们神通广大的测试的测试,发现相册中的图片在上传时也会发生转向问题.既然前面都解决了拍照转向的问题,那么相册中图片的上传也容易解决.修改一下需要旋转图 ...
- jQuery的性能优化
原文链接:http://www.colotu.com/html/gcs/6.html 现在越来越多的人应用jQuery了,有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquer ...
- app使用微信支付成功后,点击返回到该app却跳到另外一个app去了
刚接手了公司iOS的两个APP, 现在碰到了这样一个问题: 有一台iPhone在一个APP中使用了微信支付,支付成功后,点击返回到该APP,结果却跳到了另外一个APP去了. 这两个APP都是公司开发的 ...
- 4.1/4.2 多线程进阶篇<上>(Pthread & NSThread)
本文并非最终版本,如有更新或更正会第一时间置顶,联系方式详见文末 如果觉得本文内容过长,请前往本人 “简书” 本文源码 Demo 详见 Githubhttps://github.com/shorfng ...
- DAO设计模式
DAO设计模式 DAO设计模式简介: DAO设计模式可以减少代码量,增强程序的可移植性,提高代码的可读性. DAO(数据库操作对象)设计模式是 JavaEE 数据层的操作.主要由五部分组成: 1.数据 ...
- 一个高级的J2E工程师需要面对MySQL要有那些基本功夫呢<上>
1. MySQL的架构介绍1.1 MySQL简介: MySQL是一个关系型数据库管理系统,由瑞典MySQL AB公司开发,目前属于Oracle公司. MySQL是一种关联数据库管理系统,将数据保存在不 ...
- 优化SQLServer--表和索引的分区(二)
简介 之前一篇简单的介绍了语法和一些基本的概念,隔了一段时间,觉得有必要细致的通过实例来总结一下这部分内容.如之前所说,分区就是讲大型的对象(表)分成更小的块来管理,基本单位是行.这也就产生了很大优势 ...
- 升级Ubuntu 16.04 LTS后 DSL拨号上网(ppp)连接自动断开解决办法
原本在Ubuntu 15.10用拨号上网没有问题,但升级了16.04 LTS后发现原来的DSL连接不上了.主要表现为: 1.在NetworkManager里面选择DSL Connection能够尝试拨 ...
- 【51Nod 1244】莫比乌斯函数之和
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1244 模板题... 杜教筛和基于质因子分解的筛法都写了一下模板. 杜教筛 ...
- JAVA设计模式之1-单例模式
设计模式是什么? 设计模式是一种思路,是在前辈们的软件工程中总结出来的套路,并且这些套路已经经过很多项目的测试,是比较成熟的思路,所以现在来总结一下常见的设计模式. 最简单最常用的就是单例模式: 一般 ...