移动适配

当前用户的屏幕宽度不同，网页元素尺寸不同，那如何在不同的屏幕尺寸中实现网页元素的等比缩放，实现宽高自适应呢？px单位或百分比布局是否可以实现这种效果呢？今天让我们来了解一下移动适配。

百分比布局特点宽度自适应，高度固定，并不能做到宽高随着屏幕尺寸的变化而完全自适应。想要实现屏幕适配，重点就在相对单位上，只能选择相对长度单位。

目前解决这种问题的方法有两种：

rem ：目前多数企业在用的解决方案
vw / vh：未来的解决方案

初识vw/vh

文字解析

1.什么是vw/vh？

vw是相对长度单位，相对于视口宽度（1vw=1/100屏幕宽度）

vh是相对长度单位，相对于视口高度（1vw=1/100屏幕高度）

有什么作用呢？

实现移动端屏幕适配，一套代码可以实现：
- 大一点的屏幕看起来里面的元素就越大
- 小一点的屏幕看起来里面的元素就越小
我们要使用vw/vh，那如何根据设计稿以及里面元素的大小，来确定对应数值的vw或者vh呢？

分析：我们已知的只有设计稿跟元素div的宽高，对用户使用什么尺寸的屏幕观看一无所知，那我们要写多少的vw，才能够做好移动适配呢？

已知1vw=1/100屏幕宽度，那么手机屏幕就是100vw（只是不同尺寸屏幕的手机中，vw的值不同）,那要如何获取适配手机中的div的宽度呢。让我们用简单的数学运算来分析一下：

已知手机中div的宽度/要适配手机的屏幕100vw=设计稿中div的宽度/设计稿的宽度，经过左右转换可得出：

要适配的手机中的div的宽度= (要适配的手机的屏幕100vw) * 设计稿中div的宽度/设计稿的宽度。
分析题目：假如设计稿宽度为375px，div为100px；手机屏幕为750px，那么手机中盒子div的宽度为多少呢？

手机盒子div=100vw*100/375=26.6667vw

上方的解析过于冗杂，简而言之就是个字：“等比例缩放”

只要得出设计稿中div占据总提宽度的比值，再乘以100vw，就可以得出手机屏幕中div的宽度。

*（设计稿div宽度 / 总宽度）100vw=手机屏幕中div的宽度

图片解析

感觉文字过于抽象的，可以查看下方的图片解析：

练习测试

看完之后，尝试一下是否能做出下方练习哦

完成代码：

<!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>vw练习</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
/* 1.vw跟px单位不同，所以无法直接进行计算，需要在中间添加calc() 
   2. calc()是计算的缩写，方便计算
   3. 运算符两侧要添加空格 
*/
        .box1 {
            width: calc(100vw * 100 / 375);
            height: calc(100vw * 50 / 375);
            /* 运算符两个要添加空格 */
            background-color: red;
        }

        .box2 {
            width: calc(100vw * 200 / 375);
            height: calc(100vw * 80 / 375);
            background-color: yellow;
            font-size: calc(100vw *40 / 375);
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2">good</div>

</body>

</html>

添加vscode插件辅助运算vw

学习之后，是否觉得计算太过麻烦，为了提升我们的开发体验，可以添加vscode插件来辅助我们运算

先体验一下结果图：

安装插件的步骤：
1. 在vscode的扩展中直接搜索“px2vw”,并下载

安装好之后点击软件左下角的“管理——设置——打开设置（右上角）——打开之后在里面添加一行代码【 "px2vw.width": 375,】(直接复制中括号里面的字符，符号不要漏了)——添加完之后重启即可

使用：安装好之后，设置盒子div的宽度跟高度时，按照设计稿给的数据直接给div盒子添加数值即可，如上述效果图中的高度直接写 height: 100px;然后按回车键，即可选择运算好的vw单位数值

  语法：

  ```html
  <!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>vw练习</title>
      <style>
          * {
              padding: 0;
              margin: 0;
              box-sizing: border-box;
          }
  
  
          /* 使用px2vw插件后，直接写px单位即可，软件会自动帮忙计算出相应的vw数值 */
          .box {
              width: 26.6667vw;
              height: 26.6667vw;
              background-color: yellow;
          }
      </style>
  </head>
  
  <body>
      <div class="box"></div>
  
  
  </body>
  
  </html>
  ```

rem移动适配

初识rem

rem是什么？
- rem是一个相对单位，rem单位是相对于HTML标签的字号计算结果
- 1rem = 1HTML字号大小
- 使用方法：需要先设置html标签的大小，后续设置宽高的时候单位选择rem即可

目标：设置跟标签hteml以及能够使用rem单位设置网页元素的尺寸

语法：

<!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>体验rem匹配移动适配</title>
    <style>
        /* 体验rem移动适配,首先要设置html标签的字体大小
        原理： 1.rem单位是相对于HTML标签的字号计算结果;
              2.1rem = 1HTML字号大小 */
        html {
            font-size: 20px;
        }

        /* 设置盒子的宽高为5rem，实际上获得的宽高长度为：5*20=100px */
        .box {
            width: 5rem;
            height: 5rem;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

3.那要如何做到rem屏幕适配呢？

flexible

1.flexible 的作用

目标：使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果

flexible.js是手淘开发出的一个用来适配移动端的js框架
核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size
引入flexile.js 之后，屏幕宽度和html字体大小的关系为：根标签字体大小=1/10屏幕大小 → 10rem=屏幕宽度。

引入语法：

  <script src="./flexible.js"></script>

验证代码：10rem等于屏幕宽度

<!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>flexible</title>
    <style>
        .box1 {
            width: 10rem;
            height: 200px;
            background-color: pink;
        }

        .box2 {
            width: 5rem;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>

    <script src="./flexible.js"></script>
</body>

</html>

2.使用flexible实现屏幕适配

<!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>使用flexible 让rem实现屏幕适配</title>
    <style>
        .box1 {
            width: calc(10rem * 100 / 375);
            height: calc(10rem * 50 / 375);
            background-color: yellow;
        }

        .box2 {
            width: calc(10rem * 200 / 375);
            height: calc(10rem * 80 / 375);
            background-color: pink;
            font-size: calc(10rem * 40 / 375);
        }
    </style>
</head>

<body>
    <!-- 1.首先要先引入flexible.js文件
    2.再使用calc()来辅助计算
    3.rem的计算方式跟vw类似，如果忘记可以往回查看下vw的计算公式 -->
    <div class="box1"></div>
    <div class="box2">帅气</div>
    <script src="./flexible.js"></script>
</body>

</html>

3.添加vscode插件辅助使用rem

在刚才的使用过程中，还需要使用calc()来辅助计算，比较繁琐。我们现在使用vscode插件来优化我们的开发体验

具体的使用跟安装方法跟上方的vw一样，建议参考之前的使用步骤。

less

初识less

什么是less？

less 是一种提高我们编写css效率的技术 = > css预处理器。
less工作流程
1. 我们写样式代码直接写在less文件中
2. 通过插件来把less文件编译成我们熟悉的css文件
3. 网页中来引入编译好的 css文件! !

使用less的过程

新建一个less文件 (后缀名就是.less)
会按照less的语法要求在less文件中编写代码
通过easy less vscode插件来编译less文件
会生成对应的css文件
在网页中直接引入编译好的css文件即可

// 声明一个变量
@color: green;

div {
    // color: @color;
    width: 100px;
    height: 100px;
    background-color: @color;
    border: 1px solid @color;
}

p {
    color: @color;
}
//	声明变量的名称可以随便取
	声明一个变量之后，后续可以直接调用

less变量使用

less变量的作用：

方便我们快速的去修改样式（把一些CSS属性设置在一个地方，实现一改全改的效果。）

比如页面有一种主题色(天猫。京东红色。美团黄色。饿了吗蓝色)，当我们要修改主题颜色的时候，只改一个地方less变量。懂得了使用less变量技术就可以做到改一个地方就会达到全局修改的结果（所有使用该变量的地方，都会跟随改变）

使用方法

在less文件中设置固定语法：@+任意变量名称(有语义的英文)

设置less变量以及使用的语法案例：

// 字体大小
@fontsize: 20p;
// 主题颜色
@tmeme-color: gray;

// 字体颜色
@color: red;
// 宽度
@width: 200px;
// 高度
@height: 100px;

div {
    // 字体直接引用上方的less变量 @fontsize
    font-size: @fontsize;
    // 背景颜色直接引用上方的less变量 @tmeme-color
    background-color: @tmeme-color;
    color: @color;
}

p {
    color: @color;
    width: @width;
    height: @height;
}

CSS文件转化的代码：

div {
  font-size: 20p;
  background-color: gray;
  color: red;
}

p {
  color: red;
  width: 200px;
  height: 100px;
}

less进行运算

// 默认的css不支持运算，要添加calc才可以
div {
    /* 加 减 乘 直接使用即可
    width: 100px - 20px;
    height: 50px + 30px;
    font-size: 20px * 2;
    /*在使用除法的时候，需要用括号将数值包起来*/
    width: (200px / 2);
}

CSS语法展示：

div {
  /* 加 减 乘 直接使用即可
    width: 100px - 20px;
    height: 50px + 30px;
    font-size: 20px * 2;
    /*在使用除法的时候，需要用括号将数值包起来
  width: 100px;
}

less混合mixin使用(类似公共样式)

写法：.类名(){}

.aaa(){}

mixi混合写法类似于写公共样式，就是将一大堆相同的代码放在一起，哪里需要直接调用即可。

// less 混合mixin语法
// 精灵图所在的位置 // A (100px, 200px) B (200px, 100px) C (-100px, -200px)
// 设置公共混合样式使用
/*定义一个mixin*/
.aaa(@a1, @a2) {
    background-image: url(1.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: @a1 @a2;

}

div {
    .aaa(300px, 200px);
    // background-position: 100px 200px;
}

a {
    .aaa(100px, 200px);
    // background-position: 200px 200px;
}

p {
    background-image: url(2.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 100px 200px;
}

less嵌套：按照html的嵌套结构，来编写CSS嵌套

less嵌套有一点需要注意，在写伪元素的时候，需要在伪元素前添加一个连接符“&”

.box {
    background-color: red;
    width: 100px;
    height: 100px;


    .box1 {
        width: 50px;
        height: 50px;
        background-color: blanchedalmond;

        /*嵌套伪元素选择器时，需要在前面添加一个“&”连接符*/
        .img {
            &::after {
                content: '这是一个伪元素';
            }

            font-size: 20px;
            width: 10px;
            height: 20px;
            background-color: aqua;
            overflow: hidden;

            .box2 {
                background-color: yellow;
                width: 100px;
                height: 100px;
            }
        }

    }
}

.main {
    width: 800px;
    height: 800px;
    background-color: tomato;

    >.te {
        font-size: 200px;
    }
}

前端web之移动适配