px和em,rem的区别
任意浏览器的默认字体高都是16px。
px: 像素(Pixel) , 计算机屏幕上的一个点。固定大小；不方便维护；
em：相对于当前对象内 (父元素) 文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(16px)。相对大小；
rem:相对于HTML根元素。相对大小；
(所有未经调整的浏览器都符合: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作为单位就行了。)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html{
font-size:12px;
}
#father{
font-size: 22px;
}
#em{
font-size: 1em;
}
#rem{
font-size: 1rem;
}
#px{
font-size: 32px;
}
</style>
</head>
<body>
<div id="father">
<div id="em">我是1em</div>
<div id="rem">我是1rem</div>
<div id="px">我是32px</div>
</div>
</body>
</html>
浏览器的兼容性: 除了IE6-IE8r，其它的浏览器都支持em和rem属性，px是所有浏览器都支持。
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这个单位,兼容性可以说 ...
随机推荐
- 洛谷-乘积最大-NOIP2000提高组复赛
题目描述 Description 今年是国际数学联盟确定的“2000――世界数学年”,又恰逢我国著名数学家华罗庚先生诞辰90周年.在华罗庚先生的家乡江苏金坛,组织了一场别开生面的数学智力竞赛的活动,你 ...
- 获取客户端IP地址经纬度所在城市
<?php $getIp=$_SERVER["REMOTE_ADDR"]; echo 'IP:',$getIp; echo '<br/>'; $content = ...
- php+mysql 内联接 和 子查询
INNER JOIN(内连接):取得两个表中存在连接匹配关系的记录 $sql="SELECT * FROM subject as a INNER JOIN e_user as b ON a. ...
- QT源码剖析之QSS样式表
1. "QApplication::setStyleSheet()"设置样式表: 1. 创建新的样式表. 2. 设置新的样式. void QApplication::setStyl ...
- Xcode-之Code Snippets Library
一.说明 Code Snippets Library 为代码片段库,在开发项目过程中经常会遇到一些重复的代码块,创建代码片段库可以减少我们开发的工作量,而且非常方便调用.Xcode系统中也为我们提供了 ...
- hdu 1384 Intervals
差分约束系统. 求最小值,用最长路来解决. #include<cstdio> #include<cstring> #include<cmath> #include& ...
- L2-010. 排座位
L2-010. 排座位 题目链接:https://www.patest.cn/contests/gplt/L2-010 并查集 相关题目:L2-007. 家庭房产,L3-003. 社交集群 下午打的时 ...
- cocoaPods使用
1更新版本:pod repo update 有时太老的gem版本,搜索不到最新SDK库 特殊情况下,由于网络或者别的原因,通过 CocoaPods 下载的文件可能会有问题. 这时候您可以删除 Coco ...
- 第一百一十三节，JavaScript文档对象，DOM基础
JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...
- 第一百一十二节，JavaScript浏览器检测
JavaScript浏览器检测 学习要点: 1.navigator对象 2.客户端检测 由于每个浏览器都具有自己独到的扩展,所以在开发阶段来判断浏览器是一个非常重要的步骤.虽然浏览器开发商在公共接口方 ...