<body>
　　<style type="text/css" rel="stylesheet">
　　　　html,body{
　　　　　　font-size: 16px;
　　　　}

　　　　p {
　　　　　　-webkit-margin-before: 2em;
　　　　　　-webkit-margin-after: 2em;
　　　　　　-webkit-margin-start: 0px;
　　　　　　-webkit-margin-end: 0px;
　　　　}

　　　　.select {
　　　　　　width: 50px;
　　　　　　height: 1em;
　　　　　　background: firebrick;
　　　　　}

　　　　#parent {
　　　　　　font-size: 25px;
　　　　}

　　　　#child01 {
　　　　　　width: 100px;
　　　　　　height: 10em;
　　　　　　background: darkgoldenrod;
　　　　}

　　　　#child02 {
　　　　　　width: 100px;
　　　　　　height: 10rem;
　　　　　　background: darkmagenta;
　　　　}
　　</style>
　　<div class="select"></div>

　　<p id="tag" style="float: left;">this is p</p>
　　<div id="parent" style="float: left;">
　　　　<div id="child01" style="float: left;">
　　　　　　<p>this is child01</p>
　　　　</div>
　　　　<div id="child02" style="float: left;">
　　　　　　<p>this is child02</p>
　　　　</div>
　　</div>

　　</body>
　　<script>
　　　　var tagEle = document.getElementById("tag");
　　　　var tagStyle = getComputedStyle(tagEle);
　　　　console.log(tagStyle["fontSize"]);
　　</script>

　　1.em的值不是固定大小；

　　2.em，rem会继承父元素的字体大小；

　　3.em在body中声明字体大小，rem在html中声明字体大小，

　　4.在-webkit-浏览器中最小13px，小于13px没效果。

　　任意浏览器的默认字体高都是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作为单位就行了。

em换算px,rem换算px的更多相关文章

  1. rem与px之间的换算（移动端）

    最近因为工作接触到rem与px之间的换算,之前知道一些,不过还是比较笼统模糊,用起来不是很明白,后来自己查了点资料,以及亲自测试总算明白它们之间是怎么换算的了. rem是一个相对值,它相对于根元素ht ...

  2. 移动端的vw px rem之间换算

    一.vw px rem em是什么 1.vw:就是相对视口宽度(Viewport Width).1vw = 1% * 视口宽度.也就是说,一个视口就是100vw. 2.px:px应该是在css中使用最 ...

  3. px自动换算rem

    //designWidth:设计稿的实际宽度值,需要根据实际设置//maxWidth:制作稿的最大宽度值,需要根据实际设置//这段js的最后面有两个参数记得要设置,一个为设计稿实际宽度,一个为制作稿最 ...

  4. 从理解开始 谈谈px rem 和 em 的区别与联系

    概述 古语有云,没有规矩则不成方圆.秦灭六国之后为了促进国内生产力的发展,也是大力推进全国度量衡的统一.车同轨,书同文.与"尺寸"相关的问题(手动滑稽),从古至今一直为人们所关注. ...

  5. css单位介绍em ex ch rem vw vh vm cm mm in pt pc px

    长度单位主要有以下几种em ex ch rem vw vh vm cm mm in pt pc px %,大概可以分为几种"绝对单位"和"相对单位"和" ...

  6. EM vs REM vs PX，为什么你不应该”只用px“”

    Actually this artical is from other person's opnion ,i just put it into chinese,and this means a ver ...

  7. CSS中em、rem和px的区别

    任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px,1rem=16px. EM特点  1. em的值并不是固定的: 2. em会继承父级元素的字体大小. rem特点 r ...

  8. 简谈CSS 中的 em，rem，px，%

    在实际工作中,可能我们用的比较多的是‘%’ 和 px,但是我们也经常看到很多网站和css框架里用的是em 或rem.而‘%’ 和px已经都是比较常见或者说是常用.但是em 和rem 却鲜有使用,一直以 ...

  9. 前端页面的适配使用rem换算

    前端页面的适配使用rem换算 https://www.cnblogs.com/liangxuru/p/6970629.html 注:本文转载之处:https://www.cnblogs.com/ann ...

随机推荐

  1. Sqlserver 语法总结

    修改列类型 alter table PRO_Element_b alter column matname varchar(1024) 更改一个表中的数据到另外一个表中 update a set a.n ...

  2. 使用最快速的方式激活windows10专业版

    1.安装win10专业版 2.在桌面新建“文本文档.txt” 3.复制如下代码到新新建的“文本文档.txt”中 slmgr /ipk VK7JG-NPHTM-C97JM-9MPGT-3V66T slm ...

  3. Git从入门到学会

    Git简介 Git是什么? Git和SVN一样都是一种高效的管理代码的系统. Git是目前世界上最先进的分布式版本控制系统(没有之一). 创建版本库 什么是版本库呢?版本库又名仓库,英文名reposi ...

  4. bzoj1835[ZJOI2010]base基站选址

    据说正解是什么线段树优化DP,但是作为脑子有坑选手,我们需要5k的做法: 主席树+决策单调性..... F[m][i]表示已经放置了m个基站,第m个基站放置在第i个村庄,第i个村庄及之前的村庄的总最少 ...

  5. java 对象入门

    对象的五大特征 (1)所有东西都是对象.可将对象想象成一种新型变量;它保存着数据,但可要求对自身进行操作.理论上讲, 可从要解决的问题身上提出所有概念性的组件,然后再程序中将其表达为一个对象. (2) ...

  6. mosquitt win32

    软件 mosquitto-1.4.10-install-win32.exe. 安装时候提示下载后面两个.win32openssl一定是1_0_1,否则没有需要的dll文件. pthreadVC2.dl ...

  7. linux中ls命令

    ls跟dos下的dir命令是一样的都是用来列出目录下的文件 ls参数: -a: ls -a 列出文件下所有的文件,包括以"."开头的隐藏文件(linux下文件隐藏文件是以.开头的, ...

  8. js函数传参

    函数传参:重用代码,首先保持html代码相对一致,把核心主程序用函数包起来,把每组不同的值找出来,通过传参的方式减少代码的使用 下面代码是我早期练习的,大家随便看看就好 <!DOCTYPE ht ...

  9. JS 工厂模式

    1.什么是工厂模式 工厂模式是面向对象的设计模式,作用在于创建一个对象,mixin模式也是面向对象的设计模式,作用在于继承. 工厂模式定义一个接口,让实现这个接口的类来决定实例化哪个类,也就是说通过一 ...

  10. Container View 使用小技巧

    一.传值,顺传 -(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender { TVC *vc = segue.destin ...