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的区别的更多相关文章

  1. 彻底弄懂css中单位px和em,rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...

  2. CSS中单位px和em,rem的区别

    PX特点: 1 IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...

  3. 彻底弄懂css中单位px和em,rem的区别 转的自己看

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...

  4. 弄懂css中单位px和em,rem的区别

              国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?         PX特点 1. IE无法调整那些使用px作为单位的字体大小 ...

  5. 【转载】彻底弄懂css中单位px和em,rem的区别

    原文链接:http://www.cnblogs.com/leejersey/p/3662612.html 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什 ...

  6. css中单位px和em,rem的区别[转载]

    PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...

  7. [转]彻底弄懂css中单位px和em,rem的区别

    难怪会问我 rem 和 em, 这俩或在移动端还是很有必要学习的. root em OK? 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? P ...

  8. 网页布局设计css中单位px和em,rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...

  9. px,em, rem的区别,在项目中怎么使用rem.

    一.px px像素,绝对单位.像素px是相对于显示器屏幕分辨率而言的,是一个虚拟的长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度单位,需要指定精度DPI. 二.em em是相对长 ...

随机推荐

  1. Integer使用==做判断遇到的问题

    问题: 最近使用Integer类型的数据做判断时,遇到了一个神奇的问题. 如: Integer a=223; Integer b=223; 这样使用==做判断,得到的结果是 false 原因: 后来查 ...

  2. C++关于锁的总结(一)

    C++关于锁的总结(一) 线程中的锁分为两种,互斥锁和共享锁. 相关的头文件有<mutex>,<shared_mutex>,前者具有std::unique_lock操作,用于实 ...

  3. Python之lambda表达式的妙用

    用法 Python的lambda表达式用于构建匿名函数,基本语法是在冒号左边放原函数的参数,可以有多个参数,用逗号隔开即可:冒号右边是返回值. >>> lambda x,y: (x+ ...

  4. MySQL概述及入门(二)

    MySql概述及入门(二) MySQL架构 逻辑架构图: 执行流程图: MySQL的存储引擎 查询数据库支持的存储引擎 执行: show engines: 多存储引擎是mysql有别于其他数据库的一大 ...

  5. 【优惠&正版】超级硬盘数据恢复软件(SuperRecovery)7.0正版注册码(39元一机终身授权,支持最新版)

    [优惠&正版]超级硬盘数据恢复软件(SuperRecovery)7.0正版注册码(39元一机终身授权,支持最新版) 这个软件的数据恢复效果非常好,在全世界数据恢复软件内是数一数二的. 下载地址 ...

  6. Java设计模式(二)设计模式原则

    学习Java设计模式之前,有必要先了解设计模式原则. 开闭原则 定义 一个软件实体如类.模块和函数应该对扩展开放,对修改关闭 用抽象构建框架,用实现扩展细节 优点:提高软件系统的可复用性及可维护性 C ...

  7. aspose插入图片

    当使用以下代码插入图片时 int iIndex = sheet.Pictures.Add(x, y, PicturePath); Aspose.Cells.Drawing.Picture pic = ...

  8. gulp常用插件之gulp-replace使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-replace这是一款gulp3的字符串替换插件. 更多使用文档请点击访问gulp-replace工具官网. 安装 一键安装不多解释 n ...

  9. LeetCode 965. 单值二叉树 (遍历二叉树)

    题目链接:https://leetcode-cn.com/problems/univalued-binary-tree/ 如果二叉树每个节点都具有相同的值,那么该二叉树就是单值二叉树. 只有给定的树是 ...

  10. Linux 常用命令 服务器间scp 用户 export 创建文件、软连接

    获取外网ip curl icanhazip.com 服务器间的 文件 复制 scp root@ip:/源目录 目标目录 软连接 查看软连接 ls -li 创建软连接 ln -s 源文件 目标文件 -s ...