em、rem、px在Web开发中的区别
来源:互联网 发布:windows 10 superfetch 编辑:程序博客网 时间:2024/06/05 07:13
随着响应式设计的不断火热,基于相对字体大小的单位变开始流行起来,但他们真正的区别在哪里,有的时候会搞得晕头转向,在这里我来做个总结。如果有说的不当的地方,还请各位同仁多多指教。
在说之前有两个很重要的概念,那就是font-size具有继承性以及body,html是根元素。
- px 这个单位的特点就是精准性。但是他的缺点就在于太过于精确从而导致用户在拖动、改变浏览器的字号大小以及尺寸时,就会出错。这样对于那些关心自己网站可用性的用户来说,就是一个大问题了。因此,这时就提出了使用“em”来定义Web页面的字体。
- em 这个单位是相对于父级作为参考点而进行设置的,主要作用是为了适应不同屏幕下的字号大小。如果当前元素的父级并没有设置字号大小,那么此元素的基准点会被转移到根元素上。比如,在body以及html上设置了font-size=“14px”,那么根目录下的所有字号大小都是根据这个14px来进行转换的。如果遇到需要进行单独设置的情况时,只需要在当前元素的父级上设置一个新的font-size即可。在此我给大家推荐一篇文章How to size text using ems
body { font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/ } h1 { font-size: 2.4em; /*2.4em × 10 = 24px */ } p { font-size: 1.4em; /*1.4em × 10 = 14px */ } li { font-size: 1.4em; /*1.4 × ? = 14px ? */ }
rem Css3的官网是这样定义rem的 “font size of the root element” rem依旧只是相对大小,但只是相对于html根目录的字号大小,也就是说,我只需要改变根目录的字号大小就可以改变全局的字号大小。而em虽说可以根据父级元素以及根元素的大小而进行改变,但却具有一定的不确定性。推荐给大家一个单位转换的网站以供参考。
在这里建议将根目录字号大小设置为62.5%
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/} body {font-size: 1.4rem;/*1.4 × 10px = 14px */} h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
但是rem存在一定的兼容性,比如IE6-8就不支持,解决的办法就是px和rem一起设置。
阅读全文
0 0
- em、rem、px在Web开发中的区别
- web开发中px\em\rem\pt区别
- 区别CSS单位中的px,em,rem
- rem em px 区别
- PX EM REM 区别
- em px rem 区别
- px em rem区别
- px em rem区别
- em,rem.px区别
- px,em,rem区别
- WEB前端 -- px、em、rem
- px、em和rem区别
- rem,em,px的区别
- px em rem 的区别
- rem ,em ,px的区别
- px,em,rem的区别
- px rem em的区别
- css中的px,em&rem
- It's never too late to learn
- 摩拜ofo否认挪用60亿押金;乐视出售世界杯香港地区版权;Windows 10装机量已经达到6亿丨价值早报
- wrk一次测试多个http/https网址
- MT6735[CTS Verifier][Test Method]Widget Framework Test
- LoadRunner详细初级教程
- em、rem、px在Web开发中的区别
- 大型网站技术架构(五)——网站高可用架构
- flume1.6自定义elasticsearch2.3的sink插件
- 在Linux系统给交叉编译器加环境变量
- java日志详细配置
- int 64 打印总结
- Intent传值
- navicat for mysql 中文乱码 显示?问号 BUG
- 基于ubuntu14.04的Mobilenet_SSD环境搭建