px、em、rem的区别css单位换算
2024-10-21 09:27:41
在对页面进行自适应时,查阅相关资料了解到,通常有两种方式将px转换为em或者rem,下面就上述三者之间的联系进行讲解:
em与px转换
一般浏览器默认1em=16px,通过设置font-size大小来代表如:16px*0.625=10px,其则代表1em=10px,直接上代码(注释的样式为浏览器默认 (1em=16px)的长宽):
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{font-size: 16px;}
/*1em=10px*/
/*#div1{width:640px;height:320px;margin:160px auto;padding-top:160px;}*/
#div1{width:40em;height:20em;margin:10em auto;padding-top:10em;}
/*#div2{width:200px;height:200px;margin:0 auto;}*/
#div2{width:12.5em;height:12.5em;margin:0 auto;}
/*#div3{width:480px;height:320px;margin:80px auto;}*/
#div3{width:30em;height:20em;margin:5em auto;}
</style>
</head>
<body>
<div id="div1" style="background:lightslategray;">
<div id="div2" style="background: darkseagreen;"></div>
</div>
<div id="div3" style="background: deepskyblue;"></div>
</body>
</html>
在进行转换之前,我们一定要查看浏览器默认字体(最小)大小,如chrome浏览器,默认字体最小为12px,所以即使我们为了方便设置1em=10px,其浏览器仍旧以1em=12px计算。
16px*0.75=12px=1em
body{font-size: 12px;}
或者{font-size: 75%;}
em与rem区别
rem与px,和em与px转换是一样的,二者区别在于前者默认从根元素继承,后者从父级元素继承,还是上述代码,html我们不设置font-size,其默认为16px,上代码展示(div3单位我们修改为rem):
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{font-size: 12px;}
/*1em=10px*/
/*#div1{width:640px;height:320px;margin:160px auto;padding-top:160px;}*/
#div1{width:40em;height:20em;margin:10em auto;padding-top:10em;}
/*#div2{width:200px;height:200px;margin:0 auto;}*/
#div2{width:12.5em;height:12.5em;margin:0 auto;}
/*#div3{width:480px;height:320px;margin:80px auto;}*/
#div3{width:30rem;height:20rem;margin:5rem auto;}
</style>
</head>
<body>
<div id="div1" style="background:lightslategray;">
<div id="div2" style="background: darkseagreen;"></div>
</div>
<div id="div3" style="background: deepskyblue;"></div>
</body>
</html>
从上述我们可以看到,div3单位设置rem后,其并没有根据body设置而变化,仍旧默认font-size:16px。所以为了方便,我们可以设置16px*1.25=20px,其代表1em为20px,同样有利于我们计算。
最新文章
- Partition:增加分区
- ios选取相册视频,过滤掉所有图片!
- Linux tr命令
- C/c++笔试经典程序(一)
- css各兼容应该注意的问题
- Bootstrap简单Demo(2015年05月-18日)
- 多线程程序设计学习(9)worker pattern模式
- 建立第一个OpenGL工程(GLUT)
- 使用reuseport和recvmmsg优化UDP服务器
- Java keyword具体解释
- 嵌入式开发(一) Ubuntu12.04下搭建交叉编译环境
- Groovy在不同JDK版本下的性能差异
- javascript面向对象之闭包
- ASP.NET Identity 身份验证和基于角色的授权
- Struts1和Struts2的区别和对比
- jersey 用FastJson替换掉默认的Jackson
- Eclipse环境配置与快捷命令
- 照葫芦画瓢之爬虫豆瓣top100
- linux之shell终端使用操作快捷键
- Playfair加密