<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>px-em-rem</title>

        <style type="text/css">

        html{

            font-size: 15px;

        }

        body{

            font-size: 20px;

        }

            .px{

                width: 100px;

                height: 100px;

                background: yellow;

            }

            .em{

                width: 100em;   /*1em = 16px;  参照是父元素*/

                height: 100em;

                background: red;

            }

            .rem{

                width: 100rem;  /*1rem = 16px; 参照是根元素*/

                height: 100rem;

                background: blue;

                /*0.4*font-size=40px;  font-size=100px;

                 0.4*font-size=50px;  font-size=125px;

                 * */

            }

            .father{

                font-size: 12px;

            }

        </style>

    </head>

    <body>

        <div class="px"></div>

        <div class="father">

            <div class="em"></div>

        </div>

        <div class="rem"></div>

    </body>

</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. Wordpress 建站（一）

    去年在美国的justhost上买了两个域名(shanyexuanyu.com  和 chenjinyu.net.shanyexuanyu.com是给一位马来西亚的佛教徒朋友做的站点. 她镜头下佛教的文 ...

  2. 【bzoj4592】[Shoi2015]脑洞治疗仪

    由于脑洞的序列不会改变,考虑用线段树维护区间内sum,左边0的个数,右边0的个数,区间内最大脑洞.对于查询l~r最大脑洞可以将l~r分成logn个区间,总复杂度O(nlogn). #include&l ...

  3. linux switch_root

    1 命令格式 switch_root newroot init 跳转到另外一个文件系统,并且把newroot作为新的mount tree,并且执行init程序. 2 特殊要求 newroot必须是一个 ...

  4. 在java程序中，对于数据的输入/输出操作以“流”（stream）方式进行

    在java程序中,对于数据的输入/输出操作以“流”(stream)方式进行

  5. dom小练习

    dom小练习 学习要点 综合运用学过的知识完成几个综合小练习,巩固学过的知识. 阶段小练习8-1:改变网页字体的大小 要求和提示: 要求:当用户选择‘大/中/小’的选项时,页面字体发生相应的变化 阶段 ...

  6. luogu3605晋升者计数

    https://www.zybuluo.com/ysner/note/1282069 题面 给一颗带点权的树,求每个点的子树中比该点权值大的点的个数. \(n\leq10^5\) 解析 首先有个很无脑 ...

  7. 逻辑频道号---DVB NIT LCN

    先介绍NIT,NIT描述如下: 有一点要注意,NIT是对大网的描述,即NIT并不是描述当前的流,而是描述大网的某些或者全部流.如下图,TS流描述1-6共对6个频点不同的TS流进行了描述,具体对哪一个流 ...

  8. Real-Time Compressive Tracking，实时压缩感知跟踪算法解读

    这是Kaihua Zhang发表在ECCV2012的paper,文中提出了一种基于压缩感知(compressive sensing)的单目标跟踪算法,该算法利用满足压缩感知(compressive s ...

  9. bzoj1050

    最小生成树 其实这道题是最小生成树的变种,我们发现答案不一定在最小/最大生成树上,最短路算法也不可行,因为我们我们并不是希望最小值尽量的大,最大值尽量的小,这样不一定是最优的,那么我们枚举最小的边,然 ...

  10. Spark GraphX 聚合操作

    package Spark_GraphX import org.apache.spark.{SparkConf, SparkContext} import org.apache.spark.graph ...