移动端适配以及多屏幕自适应方案

文章目录

前言
一、移动端适配问题
二、meta-viewport标记
三、rem字体适配
四、vw和vh
五、postcss转换插件
总结

前言

本文主要记录适配移动端以及多屏幕的解决办法，还有postcss转换插件的编写。

一、移动端适配问题

在MDN中提到：

在移动设备和其他窄屏设备中，某些内容在比普通屏幕更宽的虚拟窗口或视口中渲染页面，然后缩小渲染的结果，以便可以一次看到所有内容。然后，用户可以通过平移和缩放以查看页面的不同区域。例如，如果移动屏幕的宽度为 640px，则页面可能会使用 980px 的虚拟视口渲染，然后页面将缩小以适应 640px 的空间。

横向滚动条

换成通俗易懂的话就是说，为了适配窄屏，他会把渲染视口以短边进行截断，然后就出现了横向滚动条，让用户能够左右滑动来查看完整的页面，但是这样做对移动端有很大的问题，左右滑动对移动端的用户体验大打折扣。
所以需要某种机制或者方法来适配移动端。
以下是最为常见的移动端适配方案。

二、meta-viewport标记

meta标签写在<head>标签中

<head>
    <meta charset="UTF-8">
<!--    移动端适配-->
    <meta name="viewport" content="with=device-width,initial-scale=1.0">
    <title>Title</title>
</head>

其中有很多选项用来调整视口与屏幕的关系

width
控制视口的大小。这可以设置为特定像素数（如’width=600’），也可以设置为特殊值device-width，即 100vw，100% 的视口宽度。最小值为 1。最大值为 10000。负值会被忽略。
height
控制视口的大小。这可以设置为特定像素数（如 width=600），也可以设置为特殊值 device-height，即 100vh，100% 的视口高度。最小值为 1。最大值为 10000。负值会被忽略。
initial-scale
控制页面首次加载时显示的缩放倍数。最小值是 0.1。最大值是 10。默认值为 1。负值会被忽略。
minimum-scale
控制页面允许缩小的倍数。最小值是 0.1。最大值是 10。默认值为 1。负值会被忽略。
maximum-scale
控制页面允许放大的倍数。设置一个低于 3 的值将不具备无障碍访问性。最小值是 0.1。最大值是 10。默认值为 1。负值会被忽略。
user-scalable
控制是否允许页面上的放大和缩小操作。有效值为 0、1、yes 或 no。默认值为 1，与 yes 相同。将值设置为 0（即与 no 相同）将违反 Web 内容无障碍指南（WCAG）。
interactive-widget
指定交互式 UI 组件（如虚拟键盘）对页面视口的影响。有效值：resizes-visual、resizes-content 或 overlays-content。默认值：resizes-visual。
viewport-fit
设置为 cover 可以解决 刘海屏 的留白问题

最终完整的meta标签可以写成：

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

在创建vue项目时，他会在index.html中自动加入这个标签。

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + TS</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

优点：

不需要考虑一些屏幕计算问题，直接使用设计稿中的数值就可以

缺点：

存在兼容问题，部分安卓机识别不了完整的meta属性
使整个页面都进行了适配，导致某些不用适配的也参与了适配
图片会失真

三、rem字体适配

rem是个长度单位，表示相对根元素的字体大小，例如根元素为14px，那么1rem表示14px，2rem表示28px。
利用JS控制根元素的字体大小就可以控制整个页面的字体大小的适配
首先是需要获取当前视口宽，利用宽动态调整根元素字体大小document.documentElement.clientWidth。
利用window.onresize监听当前窗口变化

其中关键点是以下的两个点：

计算对应宽度的根元素字体大小

这个一般设计稿会给，设计稿都是固定某个宽，上边对应的字体大小就是这个宽对应的字体大小，就比如设计稿给我们一个宽375px，字体28px的设计稿，那么其他宽度对应的字体大小就是：其他宽度 × 28 ÷ 750
计算子元素字体与根元素对应关系
这个也是根据设计稿计算个比例就可以了，例如一个根元素是28px，子元素是14px，那么转换成rem就是：14 ÷ 28 = 0.5 rem
这个也有一些插件可以实现将px自动转换成rem，如postcss-pxtorem，参考文章：px自动转rem

<style>
  .box{
    font-size: 3rem;
  }
  #text{
      font-size: 0.5rem;
  }
</style>
<body>
<div class="box">
  smz
</div>
<div id="text"></div>
</body>
<script>
  function adapter() {
    const text = document.querySelector('#text')
    //获取布局视口宽度，布局视口=设备横向独立像素值
    const dpWidth = document.documentElement.clientWidth
    //计算根字体大小
    const rootFonstSize = (dpWidth * 28)/375
    //设置根字体大小
    document.documentElement.style.fontSize = rootFonstSize + 'px'
    text.innerText = `当前根元素字体大小:${document.documentElement.style.fontSize}`
  }
  adapter()
  // 监听窗口变化
  window.onresize = adapter
</script>

rem

四、vw和vh

vw和vh也是长度单位，他与传统的以像素为单位不同，他是以视口百分比为单位
对于百分比布局有一定的区别，百分比是相对于父元素，尔vw和vh是相对于视口的

1vw:表示视口宽度的百分之1
1vh：表示视口高度的百分之1

也就是说100vw和100vh表示整个视口

使用vw和vh就不用再使用JS控制了
同样，使用此单位也需要计算设计稿中px与视口比例关系：对应像素长度 × 100vw ÷ 设计稿屏幕像素宽

less文件：

body{
  @basic:375/100vw;
  .box{
    width: 300/@basic;
    height: 150/@basic;
    background: red;
    margin: auto;
  }
}

五、postcss转换插件

在vite开发的项目中集成了postcss，可以利用postcss编写一个全局转换的的一个方法，可以快速将px转换成vw，或者对某些可以做到不转换。

在项目目录下新建plugins目录用来存放插件
在tsconfig.node.json下添加配置项
在plugins目录下新建ts文件编写插件

import {Plugin} from "postcss";
// 默认宽度
const Options = {
    viewportWidth: 375 //UI设计稿宽度
}
interface Options {
    viewportWidth?:number
}
export const PostcssPxToViewport = (options:Options = Options):Plugin =>{
    const opt = Object.assign({},Options,options)// 将Options,options复制到同一对象中
    return {
        postcssPlugin : "postcss-px-to-viewport",// 名称
        //钩子函数 取css结点
        Declaration(cssNode){
            // 这里可以改名字‘smz’ 改成需要转换的，比如‘smz’ 就只针对 单位为'smz'的css结点进行转换
            if (cssNode.value.includes('smz')){// cssNode.value.includes('px')对含有px单位的css结点，可更改
                const num = parseFloat(cssNode.value)// 转换成数字去掉px
                cssNode.value =  `${(( num / opt.viewportWidth) * 100).toFixed(2)}vw` // 计算公式
            }
        }
    }
}

在vite.config.ts引入注册插件

引入插件

使用：

<template>
<div class="box">
  postcss转换插件
</div>
  <div class="box2">
    普通未转换
  </div>
</template>

<style scoped>
.box{
  width: 200smz;
  height: 100smz;
  font-size: 20smz;
  border: 3px solid red;
}
.box2{
   width: 200px;
   height: 100px;
   font-size: 20px;
  border: 3px solid yellow;
 }
</style>

postcss转换插件

总结

以上三种方案，是相互搭配进行移动端的适配的。