【css】ex | em | rem

最新推荐文章于 2023-12-21 17:26:42 发布

richest_qi

最新推荐文章于 2023-12-21 17:26:42 发布

阅读量432

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qzw752890913/article/details/107818778

版权

css 专栏收录该内容

69 篇文章 4 订阅

订阅专栏

1ex
1个小写字母x的高度，和font-size有关，font-size越大，ex越大
1em
1个大写字母M的高度，1个font-size，所在元素的font-size
1rem
root em，即根元素的em，1个font-size，根元素的font-size。
rem很适合移动开发，用以适配不同尺寸的屏幕。

<body>
    <div class="exBox">10ex</div>
    <div class="emBox">10eM</div>
    <div class="remBox">10reM</div>
</body>

div{
    margin:10px;
    background-color:lightskyblue;
}
.exBox{
    width:10ex;height:10ex;
}
.emBox{
    font-size:24px;
    width:10em;height:10em;
}
.remBox{
    width:10rem;height:10rem;
}

在这里插入图片描述

<body>
    <div class="box">
        <a class="item"><i></i><span>1</span></a>
        <a class="item"><i></i><span>2</span></a>
        <a class="item"><i></i><span>3</span></a>
        <a class="item"><i></i><span>4</span></a>
        <a class="item"><i></i><span>5</span></a>
        <a class="item"><i></i><span>6</span></a>
        <a class="item"><i></i><span>7</span></a>
        <a class="item"><i></i><span>8</span></a>
    </div>
</body>

body{
    margin:0;
}
.box{
    width: 10rem;
    margin:0 auto;
}

在这里插入图片描述

所以，最终样式如下，

body{
    margin:0;
}
.box{
    width: 10rem;
    margin:0 auto;
}
.item{
    float:left;
    width: 2.5rem;
    text-align: center;
    padding-top: 0.5rem;
}
.item i{
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-color: lightskyblue;
    border-radius: 50%;
}
.item span{
    display: block;
    line-height: 0.8rem;
    font-size: 14px;
}

//js确定根元素的font-size
 <script>
     const resetFontSize = () => {
         var width = document.documentElement.clientWidth;
         var fontSize = 16;
         if(width > 640) fontSize = width/10;
         document.documentElement.style.fontSize = fontSize + "px";
     }
     resetFontSize();
     window.addEventListener("resize",resetFontSize,false);
 </script>