Community Learn Tools Library Leisure
search
English
Home > List of blog posts > rem与em
Blogger Information
Blog 33
fans 1
comment 0
visits 21888
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
rem与em
冰雪琉璃
Original
608 people have browsed it

em的原理

  • 浏览器默认的1em=16px;也就是html根元素的font-size属性值为16px

    用em做一个盒子演示

    案例代码

    1. <!DOCTYPE html>
    2.            <html lang="en">
    3.            <head>
    4.                <meta charset="UTF-8">
    5.                <title>em和rem</title>
    6.                <style type="text/css">
    7.                        .box{
    8.                    /*运用IE盒子*/
    9.                    box-sizing:border-box;
    10.                    /*此时的1em=20px改变了浏览器默认的1em=16px;*/
    11.                    font-size:20px;
    12.                    /*相当于20px*8em=160px*/
    13.                    width:8em;
    14.                    /*相当于5em*20px=100px*/
    15.                    height:5em;
    16.                    /*相当于2em*20px=40px*/
    17.                    padding: 2em;
    18.                    background-color:red;
    19.                }
    21.                </style>
    22.            </head>
    23.            <body>
    24.                <div class="box">我是box</div>
    25.            </body>
    26.            </html>

    效果演示

    总结：
  • 1em=16px;(浏览器默认行为）
  • em是根据上下文进行参照的可以自定义浏览器的font-size的默认值
  • 只要改变当前这个字号就可以动态的改变依赖于它的所有属性

    rem的原理

  • rem是相对长度单位，它是相对于根元素html的font-size进行参考
  • 因为它是一个相对值所有适用于移动端而不适应于pc端
  • 它会根据屏幕的宽度自动适应
  • 它是一个固定值

    案例代码

    1. <!DOCTYPE html>
    2.            <html lang="en">
    3.            <head>
    4.                <meta charset="UTF-8">
    5.                <title>em和rem</title>
    6.                <style type="text/css">
    7.                html{
    8.                    font-size:10px;
    9.                }
    10.                   .box{
    11.                    /*相对于10rem*10px=100px*/
    12.                    width: 10rem;
    13.                    /*相对于10rem*10px=100px*/
    14.                    height: 10rem;
    15.                    background-color:green;
    16.                }
    17.                   </style>
    18.            </head>
    19.            <body>
    20.                <div class="box">我是box</div>
    21.            </body>
    22.            </html>
    效果图
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post