移动端适配

视口（viewport）

在一个浏览器中可以看到的区域就是视口
在pc端布局视口和视觉视口是同一个
移动端的网页窗口通常较小，默认情况下，布局视口是大于``````视觉视口的

移动端视口划分

布局视口（layout viewport）
视觉视口（visual layout）
理想视口（idea layout）

布局视口

默认情况下，一个pc端的网页在移动端是如何显示的？

第一，他会按照宽度为980px来布局一个页面的盒子和内容
第二，为了能够在手机中完整的显示网页内容，浏览器会对页面进行等比例缩放，那么内容也就随之变小

相对于980px布局的这个视口，称之为布局视口（layout viewport）

布局视口的默认宽度是980px

视觉视口

如果默认情况下，我们按照980px显示内容，那么右侧就会有一部分区域无法显示，所以手机浏览器会```默认对页面进行缩放以显示到用户的可见区域``中

显示在用户可见区域的这个视口，就是视觉视口（visual viewport）

理想视口

因为默认情况下，移动端的布局视口默认宽度是980px，但这种不利于我们开发

所以就有了理想视口的概念，所谓理想视口就是，布局视口和视觉视口一致

可以通过meta的viewport设置layout viewport的宽度和缩放，以满足正常在一个移动端的视口布局

值	可能附加的值	描述
width	一个正整数，或字符串device-width(`表示宽度和视口一样`)	定义viewport的宽度
height	一个正整数，或字符串device-width	定义viewport的高度`未被任何浏览器使用`
initial-scal	一个0.0和10.0之间的正数	定义设备宽度与viewport大小之间的缩放比例
maximum-scal	一个0.0和10.0之间的正数	定义缩放的最大值，必须大于minimum-scal,否则表现将不可预测
minimum-cal	一个0.0和10.0之间的正数	定义缩放的最小值，必须小于maximum-scal,否则表现将不可预测
user-scalable	yes或no	默认是yes，如果设置为no，将无法缩放当前页面。浏览器可以忽略此规则

因为user-scalable属性浏览器可以忽略，所以移动端一般如下设置

<meta name="viewport" content="width=device-width, initial-scale=1.0 maximun-scal=1.0 minimun-scal=1.0">
1

1. 百分比布局

因为不同属性的百分比值，相对的可能是不同的参照物，所以百分比往往难以统一
所以百分比布局在移动端适配中很少见

2. rem单位+动态HTML的font-size

2.1.方案一：媒体查询

可以通过媒体查询来设置不同尺寸范围内的屏幕html的font-size尺寸

缺点

需要针对不同的屏幕编写大量的媒体查询
如果动态的修改尺寸，不会实时的进行更新，因为媒体查询写的是一个范围

2.2 方案二：js动态计算fontSize大小

获取视口的大小
监听视口变化事件，动态的设置fontSize的大小

<style>
      .box {
        width: 5rem;
        height: 5rem;
        background-color: #aff;
      }
    style>
  head>
  <body>
    <div class="box">div>
  body>
  <script>
    let htmlEl = document.documentElement;
    window.addEventListener("resize", () => {
      // 获取视口的宽度
      let htmlWidth = htmlEl.clientWidth;

      let htmlFontSize = htmlWidth / 10;
      // 设置html的font-size大小
      htmlEl.style.fontSize = htmlFontSize + "px";
    });
  script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2.3.方案三：使用三方库 lib-fixible

直接引入三方库即可

会出现一个问题，没有给span单独设置字体大小的情况下，会继承html的字体大小，会很大，所以要给body单独设置一个字体大小，让后续没有设置字体大小的元素继承body

<div class="box">
    <span>dfsdfsdfspan>
div>
1
2
3

2.4.rem单位的换算

2.4.1.方案一：手动计算

假设有一个在375px屏幕上，100px宽度和高度的盒子
我们需要将100px转换成对应的rem值
100/37.5=2.6667rem

2.4.2.方案二：less混入

因为使用js动态的将整个屏幕分成10份
给的设计稿是375的,每份是37.5，font-size的大小也是37.5px
所以100px = 100 / 37.5 = 2.6667rem
相比方案一简单些

.pxToRem(@px) {
    result: 1rem * (@px / 37.5)
}

.box {
    width: .pxToRem(100)[result];
    height: .pxToRem(100)[result];
}
.p {
    font-size: .pxToRem(14)[result];
}
1
2
3
4
5
6
7
8
9
10
11

2.4.3. 方案三：postcss-pxtorem

借助webpack的插件完成，后续补上

3. vw单位布局

vw是相对于视口的宽度的
1vw = 视口宽度/100

3.1.vw相比于rem的优势

不需要计算html的font-size的大小，也不需要给html设置一个font-size属性
不会因为设置html的font-size大小，而必须给body设置一个font-size大小，防止没有设置rem的元素继承html的大小
不依赖font-size的尺寸，不用担心html的font-size大小被篡改，而影响页面的布局
vw相对于rem更加具有语义化，1vw刚好是1/100的viewport的大小
可以具备rem之前的所有有点

3.1.2.计算vw的值

3.2.1.方案一：手动计算

假设有一个在375px屏幕上，100px宽度和高度的盒子
我们需要将100px转换成对应的vw值
100/3.75=26.667vw

3.2.2.方案二：less混入

因为1vw = 视口的1%
给的设计稿是375的,每份是3.75px
所以100px = 100 / 3.75 = 26.667vw
相比方案一简单些

.pxToRem(@px) {
    result: 1vw * (@px / 3.75)
}

.box {
    width: .pxToRem(100)[result];
    height: .pxToRem(100)[result];
}
.p {
    font-size: .pxToRem(14)[result];
}
1
2
3
4
5
6
7
8
9
10
11

3.2.3. 方案三：postcss-px-to-vierport-8-plugin

借助webpack的插件完成，后续补上

4. flex的弹性布局

不过多赘述

相关阅读:
IO/NIO交互模拟及渐进式实现
Java内部类
如何用python做游戏（简单易上手版）【送源码】
【C++内存管理侯捷】---学习笔记（上）primitives(new,delete...),std::allocator
三分钟快速实现MQTT网关与三菱系列PLC远程通讯
会当“零”绝顶！天翼云零信任产品利刃出鞘
Spark中广播的使用
leetcode 172-阶乘后的零
自学嵌入式多久才可以达到找工作的水平
.NET周刊【2月第1期 2024-02-04】

原文地址：https://blog.csdn.net/qq_51558433/article/details/126061367