当前位置：网站首页>Mobile layout - fit

Mobile layout - fit

2022-07-18 11:40:00 【cc＆】

1.rem adapter （ Divide the screen into 10 Share ）

    explain ： Mobile projects need to be adapted to the screen ,rem It's a good choice

    Introduce ： It is css A unit of

              It is a dynamic unit

              It uses html Of font-size Change based on attributes  

    If html Of font-size The size is 37.5px, that 1em=37.5px

    If html Of font-size The size is 16px, that 1em=16px 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html{
            font-size: 20px;
        }
       
        #app{
            width: 10rem;
            height: 20vh;
            background-color: pink;
        }
    </style>
</head>
<body>
    <!-- <script src="./flexible.js"></script> -->
    <div id="app"></div>
</body>
</html>

  As shown in the above code #app Width =10*20=200px 

  Because the screen size of the mobile terminal is different , Therefore, media adaptation is needed

 [email protected] screen and(max-width:400px){}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
      
        @media screen and (min-width:414px){
            html{
            font-size: 41.4px;
           
        }
        }
        @media screen and (max-width:375px){
            html{
            font-size: 37.5px;
          
        }
        }
        #app{
            width: 10rem;
            height: 20vh;
            background-color: pink;
        }
    </style>
</head>
<body>
  
    <div id="app"></div>
</body>
</html>

  As shown in the above code , When the screen of the mobile terminal is less than or equal to 375px when ,#app Width -》10*37.5=375px

                            When the screen of the mobile terminal is greater than or equal to 414px when ,#app Width -》10*41.4=414px

There will be a new problem above , Now there are so many types of mobile terminals , Do you want to write one by one ,....

3. introduce flexible.js file

    explain ： Because there will be many screen devices in the future

                It is not appropriate to add all device styles to the media query

                You can use plug-ins ,flexible, To help us automatically set rem The benchmark value of

    principle ：flexible When the width of the screen changes ：

                Get the screen width

                Use width Division 10 obtain rem The benchmark value of

                Then set the reference value to html Of font-size attribute 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
      
        #app{
            width: 5rem;
            height: 20vh;
            background-color: pink;
        }
    </style>
</head>
<body>
    <script src="./flexible.js"></script>
    <div id="app"></div>
</body>
</html>

Code above ,#app Take up half of the screen （ There's a little problem , Switch mobile devices ,#app You can see the change in width ）

---------------------------------------------------------------------------------------------------------------------------------

Wouldn't it be better if I set the percentage of screen width ？？？？

原网站

版权声明
本文为[cc＆]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/199/202207152153014306.html

边栏推荐

猜你喜欢

随机推荐