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. .NET CORE(C#) WPF 值得推荐的动画菜单设计

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. .NET CORE(C#) WPF 值得推荐的动画菜单设计 阅读导航 本文背景 代码实现 本文 ...

  2. Javaweb项目中修改表单时数据回显方法

    1.前言 先来说下什么是数据回显,比如我要修改我的个人信息,点击修改按钮后进入修改界面,在这个界面中直接将原来的信息显示在表单中,而不是空表单,这就是数据回显 2.思路 当点击修改的时候,从数据库中查 ...

  3. Node.js核心模块-net

    net.Socket 类 socket.remotePort 访问服务器的远程端口 const http = require('http'); const server = http.createSe ...

  4. ipad的12系统里提示更新到ipdos13,原来安装在12上的app是不是没有了,要重新下载

    ipad的12系统里提示更新到ipdos13,原来安装在12上的app是不是没有了,要重新下载 更新后原来的WiFi密码都还在不用重新连接WiFi,桌面壁纸也是原来12系统上的 在Ipad的设置里将1 ...

  5. C# WPF之Material Design自定义颜色

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. C# WPF之Material Design自定义颜色 阅读导航 本文背景 代码实现 本文参考 ...

  6. JSP页面取不到ModelAndView里面存的值

    方法1:在jsp页面上加上<%@ page isELIgnored="false" %>

  7. P3206 [HNOI2010]城市建设 [线段树分治+LCT维护动态MST]

    Problem 这题呢 就边权会在某一时刻变掉-众所周知LCT不支持删边的qwq- 所以考虑线段树分治- 直接码一发 如果 R+1 这个时间修改 那就当做 [L,R] 插入了一条边- 然后删的边和加的 ...

  8. Bonny校园app使用体验

    Bonny校园是一款集校园表白墙.失物招领处和二手市场集一体的一款校园app,旨在帮助大学生解决校内的生活问题.这款app功能比较齐全,表白墙内含有许多有趣的信息展示,失物招领处内可以详细的展示捡到东 ...

  9. mssql格式化工具——SQL PRETTY PRINTER

    1.mssql版本 mssql格式化工具有4个版本 1.桌面版 2.mssql插件 3.vs插件 4.api 2.下载地址 下载地址:http://www.dpriver.com/dlaction.p ...

  10. source、sh、./执行脚本对变量的影响

    shell脚本中的变量: local一般用于局部变量声明,多在在函数内部使用. shell脚本中定义的变量是global的,其作用域从被定义的地方开始,到shell结束或被显示删除的地方为止. she ...