1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>px-em-rem</title>
  6.         <style type="text/css">
  7.         html{
  8.             font-size: 15px;
  9.         }
  10.         body{
  11.             font-size: 20px;
  12.         }
  13.             .px{
  14.                 width: 100px;
  15.                 height: 100px;
  16.                 background: yellow;
  17.             }
  18.             .em{
  19.                 width: 100em;   /*1em = 16px;  参照是父元素*/
  20.                 height: 100em;
  21.                 background: red;
  22.             }
  23.             .rem{
  24.                 width: 100rem;  /*1rem = 16px; 参照是根元素*/
  25.                 height: 100rem;
  26.                 background: blue;
  27.  
  28.                 /*0.4*font-size=40px;  font-size=100px;
  29.                  0.4*font-size=50px;  font-size=125px;
  30.                  * */
  31.             }
  32.             .father{
  33.                 font-size: 12px;
  34.             }
  35.         </style>
  36.     </head>
  37.     <body>
  38.         <div class="px"></div>
  39.         <div class="father">
  40.             <div class="em"></div>
  41.         </div>
  42.  
  43.         <div class="rem"></div>
  44.  
  45.     </body>
  46. </html>

px-em-rem单位转换的更多相关文章

  1. css大小单位px em rem的转换和详解

    css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...

  2. px,em,rem字体单位

    1.px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) 2.em是相对长度单位.相对于当前对象内文本的字体尺寸,em存在值继承问题. 浏览器的默认字 ...

  3. px,em,rem的区别

    PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...

  4. css中px,em,rem,rpx的区别

    今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...

  5. px em rem 区别

    PX:PX实际上就是像素,用PX设置字体大小时,比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破.这样 ...

  6. 彻底弄懂px em rem

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...

  7. px em rem区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...

  8. javascript中常见的函数封装 ：判断是否是手机，判断是否是微信，获取url地址？后面的具体参数值，毫秒格式化时间，手机端px、rem尺寸转换等

    // 判断是否是手机function plat_is_mobile(){ var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad ...

  9. CSS尺寸单位 % px em rem 详解

    在CSS中,尺寸单位分为两类:相对长度单位和绝对长度单位.相对长度单位按照不同的参考元素,又可以分为字体相对单位和视窗相对单位.字体相对单位有:em.ex.ch.rem:视窗相对单位有:vw.vh.v ...

  10. 搞清css的单位 px,em,rem的区别

    前言:现在上大街一眼望去,基本上90%的人都拿着手机,走路,逛街,吃东西都不停着,所以对于我们这种前端开发的程序猿来说,让网页适应于移动端可以说是必须要满足的.所以最近也是一直在学习和实践.然后就接触 ...

随机推荐

  1. 建立DHCPserver

    一.实验的目的:     实现以下的要求的DHCPserver,了解子网内的IP分配的情况. 二.实验目标 虚拟机 vm1:192.168.6.3/24属于子网VMnet8. 在其上建立DHCPser ...

  2. Django学习系列之django restframework

    曾几何时,Ajax已经统治了Web开发中的客户端,而REST成为web世界中最流行的架构风格(architecture style).所以我们的选择变得很简单:前端ajax访问后端的RESTful A ...

  3. 【DataStructure】Charming usage of Set in the java

    In an attempt to remove duplicate elements from list, I go to the lengths to take advantage of  meth ...

  4. mybatis中批量插入数据

    <insert id="insertIntoDevAct" parameterType="java.util.List"><foreach c ...

  5. AVAudioSessionCategory的选择

    AVAudioSessionCategoryAmbient 或 kAudioSessionCategory_AmbientSound --用于非以语音为主的应用,使用这个category的应用会随着静 ...

  6. Spring 之AOP 面向切面编程

    AOP相关术语: Joinpoint (连接点):所谓连接点是指那些被拦截到的点,在spring中,这些点指的是方法,因为spring 只支持方法类型的连接点. Pointcut(切入点):所谓切入点 ...

  7. Lein droid

    最近尝试使用Clojure,发现有个Lein droid的项目可以方便的在android下使用Clojure. http://clojure-android.info/#get-started 尝试了 ...

  8. CPU卡的读写【转】

    本文转载自:http://blog.csdn.net/logaa/article/details/7465226 一般来说,对存储卡和逻辑加密卡操作,使用接触式IC卡通用读写器:对CPU卡使用CPU卡 ...

  9. 在vs2017中创建Node.js项目

    https://github.com/Microsoft/nodejstools/wiki/Projects 1. 安装vs2017的时候,需要勾选Node.js 2.新建项目的时候,选择其他语言,然 ...

  10. 转 Dos和linux格式转换(转)

    错误提示: bad interpreter: No such file or directory: /bin/sh 错误分析: 因为操作系统是windows,在windows下编辑的脚本,所以有可能有 ...