CSS3中的rem,em与px间的换算关系
来源:互联网 发布:王德民 知乎 编辑:程序博客网 时间:2024/05/23 13:03
px,em,rem之间有什么区别?
国内的设计大师都喜欢用px,而国外的网站大都喜欢用em和rem,那三者之间有什么区别?又各自有什么优劣呢?
px
Pixel像素,相对长度单位。像素是相对于显示器分辨率而言。
em
相对长度单位,相对于当前对象内文本的字体尺寸,如当前对行内文本的字体尺寸未被设置,则相对于浏览器的默认字体尺寸。
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:1em= 16px。有时为简化font-size的换算,需要在css中的body选择器中声明font-size=62.5%,此时1em=16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说换算时只需将原有px数值除以10,然后换上em作为单位即可。
特点:
1 em 的值并不是固定的。
2 em的值会继承父级元素的字体大小。
<html> <div> <p> 你猜我字体是多大?</p> </div></html>/******css样式*********/html{ font-size:62.5% // font-size:10px 1em:10px}div{ font-size:1.2em //font-size: 10 *1.2 =12px}p{ font-size:1.2em //font-size= 12*1.2=14.4px}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
rem
rem是CSS3新增的一个相对单位(root em,根em),这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,虽然仍是相对大小,但相对的只是HTML根元素。通过rem,既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。
目前除IE8及更早版本外,所有浏览器均已支持rem。对于不支持的浏览器,可以多写一个绝对单位的声明。如此浏览器会忽略rem设定的字体大小。
p{ font-size:14px; font-size:2rem;}
- 1
- 2
- 3
- 4
注意:
1 若没有在根元素(html字体)指定参照值,那浏览器默认1 rem就是16px,若指定值,则1rem就是指定值
2 html设置为62.5%或者10px时会失效,是因为 小于12px或者75%的字体大小 不支持换算。这可能与有些浏览器不支持12px以下的大小有关。所以,使用rem单位,html的字体默认字体大小必须设置为12px或以上。若小于12px则浏览器换算时自动默认字体为12px。
px,em,rem转换进阶版
px,em,rem 在线转换工具:地址:http://pxtoem.com/
移动端适配时,大量的数据转换非常耗时。对于数学不是很好的娃来讲,恩,好讨厌。算完一遍之后还要核查一遍。更讨厌了。
懒人推动世界进步。前方高能。使用该js,无需meta viewport 进行移动端各个界面的编写。
//author:caibaojian//website:http://caibaojian.com//weibo:http:weibo.com/kujian//兼容UC竖屏转横屏出现的BUG//自定义设计稿的宽度:designWidth//最大宽度:maxWidth;(function(designWidth, maxWidth) { var doc = document, win = window; var docEl = doc.documentElement; var tid; var rootItem,rootStyle; function refreshRem() { var width = docEl.getBoundingClientRect().width; if (!maxWidth) { maxWidth = 540; }; if (width > maxWidth) { width = maxWidth; } var rem = width * 100 / designWidth; rootStyle="html{font-size:"+rem+'px !important}'; rootItem = document.getElementById('rootsize') || document.createElement("style"); if(!document.getElementById('rootsize')){ document.getElementsByTagName("head")[0].appendChild(rootItem); rootItem.id='rootsize'; } if(rootItem.styleSheet){ rootItem.styleSheet.disabled||(rootItem.styleSheet.cssText=rootStyle) }else{ try{rootItem.innerHTML=rootStyle}catch(f){rootItem.innerText=rootStyle} } docEl.style.fontSize = rem + "px"; }; refreshRem(); win.addEventListener("resize", function() { clearTimeout(tid); //防止执行两次 tid = setTimeout(refreshRem, 300); }, false); win.addEventListener("pageshow", function(e) { if (e.persisted) { // 浏览器后退的时候重新计算 clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false); if (doc.readyState === "complete") { doc.body.style.fontSize = "16px"; } else { doc.addEventListener("DOMContentLoaded", function(e) { doc.body.style.fontSize = "16px"; }, false); }})(750, 750);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
js文件下载地址:
http://download.csdn.net/detail/monster_g/9738647
- CSS3中的rem,em与px间的换算关系
- CSS3中的rem,em与px间的换算关系
- 【CSS3】CSS3中的Rem值与Px之间的换算
- CSS3中的rem值与px之间的换算
- css3中的rem值与px之间的换算
- CSS3 中的 rem 值与 px 之间的换算
- css3开发:rem与px的换算
- rem、em与px之间的关系
- rem、em、px换算
- px em rem关系
- px rem em 单位的理解和单位换算
- Rem值与Px之间的换算
- css中的px、em、rem 的理解
- px,rem,em的联系与区别
- 前端px与rem换算
- css2和css3中长度单位px和em,rem的定义与区别
- css3大小单位px、pt、em和rem的区别
- css3大小单位px、pt、em和rem的区别
- Java高级篇(四三)------Java8中时间日期库
- php开发之路径引用,头文件引入
- 欢迎使用CSDN-markdown编辑器
- 51nod 1483 化学变换(暴力,预处理)
- 让我来教你如何搭建属于自己的git服务器
- CSS3中的rem,em与px间的换算关系
- freemarker笔记
- 生成图片验证码
- 工厂三兄弟之简单工厂模式(二)
- ABAP Enhancement
- QT中关闭应用程序和窗口的函数(quit(),exit()以及close()的区别)
- SpringBoot 实现Freemarker自定义标签
- 越线人群计数--Crossing-line Crowd Counting with Two-phase Deep Neural Networks
- java中与运算,或运算,异或运算,取反运算