<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. 软件工程（FZU2015）赛季得分榜，第10回合(alpha冲刺)

    目录 第一回合 第二回合 第三回合 第四回合 第五回合 第6回合 第7回合 第8回合 第9回合 第10回合 第11回合 积分规则 积分制: 作业为10分制,练习为3分制:alpha30分: 团队项目分 ...

  2. .Net Core Linux centos7行—hyper-v安装linux系统和.net core sdk

    下载linux系统,选择安装centos7 下载地址:https://www.centos.org/download/ 安装centos7 hyper-v选择新建虚拟机 根据向导一路next,虚拟机代 ...

  3. QQ个人文件夹中的文件被占用,解决办法

    我的情况是记住密码的账号不可以登录,不记住密码的账号确可以登录,突然就这样,我也很郁闷. 找到路径C:\Users\Public\Documents\Tencent\QQ下的UserDataInfo. ...

  4. LinuxMint 18 编译cm13.0 笔记

    1.安装依赖文件 sudo apt--dev libesd0-dev git-core gnupg flex bison gperf build-essential zip curl zlib1g-d ...

  5. python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决

    python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'的解决方法: 1.原因是官网的是python2语法写的,看官手动把官 ...

  6. noip2016十连测round1

    A:String Master 题目:所谓最长公共子串,比如串 A:"abcde",串 B:"jcdkl",则它们的最长公共子串为串 "cd" ...

  7. jsp中iframe填充装个页面

    首先要引入这个css,由于我之前没有引入这个,导致iframe的高度一只是默认高度,没有改变 <style type="text/css"> body, html { ...

  8. <<< commons-fileupload 和 ajaxfileupload 实现局部上传

    最近弄了一个上传,要求实现页面的局部刷新,Java的上传组件大多还是用的 commons-fileupload,网上搜索了好多的教程,太麻烦了,看到了ajaxfileupload这个插件,不错,实现简 ...

  9. Elasticsearch集群状态脚本及grafana监控面板导出的json文件

    脚本文件: #!/usr/bin/env python import datetime import time import urllib import json import urllib2 imp ...

  10. SQL Server 数据库查找重复记录的几种方法

    http://www.hanyu123.cn/html/c61/6790.html 一.查某一列(或多列)的重复值.(只可以查出重复记录的值,不能查出整个记录的信息) 例如:查找stuid,stuna ...