移动端适配

@大熊

于 2022-07-29 17:59:53 发布

阅读量503

点赞数

分类专栏：笔记文章标签： html css html5

本文链接：https://blog.youkuaiyun.com/qq_51558433/article/details/126061367

版权

笔记专栏收录该内容

28 篇文章

订阅专栏

本文详细介绍了移动端适配的各个方面，包括视口的划分（布局视口、视觉视口、理想视口），百分比布局的挑战，rem单位配合动态HTML font-size的解决方案，以及vw单位的使用优势和转换方法。同时，提到了使用媒体查询、JavaScript动态计算、第三方库如lib-flexible和CSS预处理器less的方法，以及flex弹性布局在移动端的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动端适配

视口（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. 百分比布局

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

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>

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

直接引入三方库即可

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

<div class="box">
    <span>dfsdfsdf</span>
</div>

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];
}

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];
}