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这个单位,兼容性可以说 ...
随机推荐
- HTTPS和HTTP的区别
(转自:http://www.php100.com/html/it/biancheng/2015/0209/8582.html) 总的来说,http效率更高,https安全性更高. 首先谈谈什么是HT ...
- 也许你需要点实用的-Web前端笔试题
之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w ...
- swift-运算符
运算符:+ , - , * , / ,%, ++,-- OC和swiftch除了取模运算符,其他用法都一样 可以检测 //var num:UInt8 = 255 + 1 不可以检测 var num1: ...
- WEB页面中常见的四种控件的必须的测试
以下为常规的需求,除非需求有明确说明,如密码输入框中可以输入空格. 输入框 1. 为空,但页面中明确说明不能为空(带有星号或者只有这一个输入框),有以下两种情况: a. 不进行输入或者使其为空:焦 ...
- mysql查询本周、月、季度、年
#查询本周记录 select * from product_process where WEEKOFYEAR(update_time)=WEEKOFYEAR(now()); #查询本月数据 selec ...
- [Hadoop in Action] 第4章 编写MapReduce基础程序
基于hadoop的专利数据处理示例 MapReduce程序框架 用于计数统计的MapReduce基础程序 支持用脚本语言编写MapReduce程序的hadoop流式API 用于提升性能的Combine ...
- [数据科学] 从text, json文件中提取数据
文本文件是基本的文件类型,不管是csv, xls, json, 还是xml等等都可以按照文本文件的形式读取. #-*- coding: utf-8 -*- fpath = "data/tex ...
- 安卓Socket连接实现连接实现发送接收数据,openwrt wifi转串口连接单片机实现控制
安卓Socket连接实现连接实现发送接收数据,openwrt wifi转串口连接单片机实现控制 socket 连接采用流的方式进行发送接收数据,采用thread线程的方式. 什么是线程? 详细代码介 ...
- plain framework 1 网络流 缓存数据详解
网络流是什么?为什么网络流中需要存在缓存数据?为什么PF中要采用缓存网络数据的机制?带着这几个疑问,让我们好好详细的了解一下在网络数据交互中我们容易忽视以及薄弱的一块.该部分为PF现有的网络流模型,但 ...
- Java程序设计之链表结构
唉,说点废话,昨天偶尔看到一年前自己用C解约瑟夫环问题的循环链表,唏嘘不已,想想自己一年前嵌入式的梦呢,这两天发生了许多,而有些人不在了就真的不在了,心情不好,不多说了,直接上代码,只是些链表的基本操 ...