移动布局 -适配_<html lang="en" style="font-size: 37.5px;" data-dp-CSDN博客

1.rem适配（把屏幕分成10份）

说明：移动端的项目需要进行屏幕的适配，rem是一个不错的选择

介绍：它是css的一个单位

它是动态变化的单位

它以html的font-size属性为基准来变化

如果html的font-size大小为37.5px,那么1em=37.5px

如果html的font-size大小为16px,那么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>

如上代码所示#app的宽度=10*20=200px

因为移动端的屏幕大小并不相同，所以需要用到媒体适配

2.@media 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>

如上代码所示，当移动端的屏幕小于等于375px时，#app的宽度-》10*37.5=375px

当移动端的屏幕大于等于414px时，#app的宽度-》10*41.4=414px

以上又会出现一个新的问题，现在移动端的尺寸那么多的类型，难道要一个一个写，。。。。

3.引入 flexible.js文件

说明：由于将来屏幕设备非常多

所有的设备样式都添加到媒体查询中不太合适

可以使用插件，flexible，来帮我们自动设置rem的基准值

原理：flexible在屏幕的宽度发生变化时：

得到屏幕宽度

使用宽度除10得到rem的基准值

再将基准值设置给html的font-size属性

<!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>

如上代码，#app占用屏幕的一半（出现一个小问题，切换移动设备，#app可以看到宽度的变动）

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

那我设置屏幕宽度百分比不是更好吗？？？？