关于前端设计的EM单位（字体大小）探究

一、什么是EM单位

（代码示例）

    <style type="text/css">
        .em1{
            font-size:1em;
        }
        .em2{
            font-size:2em;
        }
        .em3{
            font-size:3em;
        }
    </style>
    <p class="em1">这是1em字体大小</p>
    <p class="em2">这是2em字体大小</p>
    <p class="em3">这是3em字体大小</p>

EM单位是指相对于父元素的字体大小进行调整的单位。在CSS中，1em等于父元素的字体大小。因此，em单位可以用来实现响应式网页设计，便于调整字体大小和网页布局。

二、使用EM单位的优缺点

（代码示例）

    <style type="text/css">
        .em{
            font-size:1em;
        }
        .px{
            font-size:16px;
        }
    </style>
    <p class="em">这是1em字体大小</p>
    <p class="px">这是16px字体大小</p>

使用EM单位的优点是，可以根据父元素的字体大小来进行相对调整，便于响应式网页设计。而且EM通常也是Web开发中最合适的单位之一，因为它们不像像素那样，对于高分辨率屏幕表现不佳。另外，当用户对浏览器字体大小进行调整的时候，使用EM单位的网页也可以相应进行调整。

但是，使用EM单位也存在一些缺点。因为EM单位通过继承父元素的字体大小，所以当嵌套多个元素的时候，很容易造成字体大小不必要的扩大或缩小。

三、使用REM单位解决嵌套问题

（代码示例）

    <style type="text/css">
        body{
            font-size:16px;
        }
        .rem1{
            font-size:1rem;
        }
        .rem2{
            font-size:2rem;
        }
        .rem3{
            font-size:3rem;
        }
    </style>
    <p class="rem1">这是1rem字体大小</p>
    <p class="rem2">这是2rem字体大小</p>
    <p class="rem3">这是3rem字体大小</p>

为了解决EM单位存在的嵌套问题，REM单位应运而生。REM单位是指相对于根元素html的字体大小进行调整的单位。因为根元素的字体大小是固定的，不会因为父元素字体大小改变而改变，所以使用REM单位可以有效避免字体大小的嵌套问题。当然，在设置REM的时候，需要先对根元素的字体大小进行设置。

四、小结

通过对EM、REM单位进行介绍，我们了解了它们与字体大小的关系，以及使用它们的优缺点。在实际应用中，我们可以根据页面需要，来选择合适的字体大小单位，从而达到更好的排版效果。