当前位置：网站首页>Difference between PX and EM and REM

Difference between PX and EM and REM

2022-07-24 06:30:00 【PS notes】

Unit overview ：

px: Pixel means

em: Relative to the parent font-size value

rem: be relative to html Labeled font-size value

Use rem Set the page size of mobile terminal

characteristic ： Different equipment sizes , You can solve this problem by setting the percentage , Setting percentage calculation is cumbersome , So use rem To solve .

    <title> </title>
</head>
<style>
    *{
       margin: 0px;
       padding: 0px; 
    }
    .pin{
        /*  Do not use pixels when using mobile terminals , Use percentage to solve  , But it is often complicated to calculate , So just use it. rem.*/
        width: 26.66%;
    }
</style>
<body>
    <img class="pin" src="images/back.png" alt="">
</body>
</html>

em: Relative to the parent font-size value

<style>
    /* em yes 30 In pixels , Then his children are set to 1em So that is 3 Pixels ,10em That's the parent 30em */
    .em{
        font-size: 30px;
    }
    .em-box{
        width: 10em;
        height: 10em;
        background-color: red;
    }
</style>
<body>
    <div class="em">
        <div class="em-box"></div>
    </div>

rem: be relative to html Labeled font-size value ：

Calculate the relationship ：html-font-size:30px; 1rem representative 30px ; 10rem representative 300px;

<style>
   
    html{
        font-size: 30px;
    }
    .em-box{
        width: 10em;
        height: 10em;
        background-color: red;
    }
</style>
<body>
    <div class="em">
        <div class="em-box"></div>
    </div>

introduce js file ,

/head>
<script src="script/fontsizeset.js" ></script>
<style>
   
    .box{
        width: 1.5rem;
        height: 1.5rem;
        background-color: red;
    }
</style>
<body>
    <div class="box">
     <h1>hello</h1>
    </div>
    
</body>
</html>

Indicate the ：rem Relationship with design draft ：

Suppose the company designer made a 750 Pixel design , Then let's take this 750 Pixels to set , If it changes later, it becomes 650 The pixel is to set the position below , Pictured

Case study ： Will design draft px convert to rem

<script src="script/fontsizeset.js" ></script>
<style>
   *{
    margin: 0px;
    padding: 0px;
   }
    .contaniner{
        width: 6.72rem;
        margin:0 auto;
        display: flex;
        align-items: center;
    }
    .contaniner pic{
        width: 2rem;
    }
    .contaniner .text{
        margin-left: 0.26;
    }
    .contaniner .text h3{
        font-size: 0.28rem;
    }
    .contaniner.text p{
        font-size: 0.24rem;
    }
    .contaniner.btn{
        border-radius: 10%;
        width: 0.96rem;
        
    }
    .btn{
        
        background-color: aqua;
    }
</style>
<body>
    <div class="contaniner">
        <img class="pic" src="images/ffff.jpg" alt="">
        <div class="text">
            <h3> The front-end development </h3>
            <p>2022.7.14</p>
        </div>
        <button class="btn"> Button </button>
</div>
    
</body>
</html>