《三》移动端适配方案

原创已于 2025-02-12 09:52:43 修改 · 480 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#移动端

于 2020-12-20 13:47:40 首次发布

移动端专栏收录该内容

14 篇文章

订阅专栏

博客围绕移动端适配展开，介绍了在不同移动设备上实现页面统一显示效果的方法。对比了 PC 端与移动端的兼容问题，详细阐述了百分比、媒体查询、rem 单位 + 动态 html、vw 单位等适配方案，分析了各方案优缺点，并给出计算元素值及单位转换的方法。

移动端适配：在不同规格的移动设备上，页面能够尽可能统一地显示效果。
在这里插入图片描述

PC 端存在的是不同浏览器的兼容问题；移动端存在的是不同机型的兼容问题。

移动端设计稿一般使用 iPhone8 的宽度 375px 作为基准值。

百分比：

所有需要动态调整的元素都使用百分比来设置。

这种方式的缺点是：因为不同属性的百分比值，相对的可能是不同的参照物，所以百分比往往很难统一，因此百分比在移动端适配中很少使用。

媒体查询：

早期的布局方式，主要是通过查询设备的宽度来执行不同的 CSS 代码。

这种方式的缺点是：

根据屏幕大小划分了区间，但是在区间内无法再进行区分，无法实现 100% 兼容。
自适应布局的工作都是需要开发者去编写代码实现的，带来了额外的开发量。
不适合功能复杂的页面。

@media screen and (min-width: 375px){
    html {
        font-size: 14.0625px;   
    }
}
@media screen and (min-width: 360px){
    html {
        font-size: 13.5px;
    }
}
@media screen and (min-width: 320px){
    html {
        font-size: 12px;
    }
}
html {
    font-size: 16px;
}

rem 单位 + html 元素动态的 `font-size`（已过时）：

rem 单位是相对于 html 元素的 font-size 来设置的（1rem = html 元素的 font-size），因此，如果需要在不同的屏幕下元素显示不同的大小，只需要：

针对不同的屏幕大小，动态地设置 html 元素的 font-size 。
使用 rem 作为单位来设置元素的大小。

针对不同的屏幕大小，动态地设置 html 元素的 `font-size`：

有以下几种方案：

媒体查询：可以通过媒体查询来设置不同大小范围屏幕的 html 的 font-size 尺寸。这种方式的缺点是：需要针对不同的屏幕大小编写大量的媒体查询；只能设置一定的范围，而不能根据屏幕大小的变化实时地变化元素的大小。

通过 JS 动态地计算：可以监听屏幕大小的实时改变，根据 html 元素的宽度计算出 font-size 的大小，然后设置到 html 元素上。

<script>
	// 获取 html 元素
	const htmlEl = document.documentElement
	function setRemUnit() {
		// 获取 html 元素的宽度（视口的宽度）
		const htmlWidth = htmlEl.clientWidth
		// 利用视口的宽度来获取 html 元素的 font-size 大小，一般都会使用视口的宽度除以 10 作为根节点的字体大小（其实除以任何值都可以，此处选择除以 10 只是为了方便之后计算元素的大小）
		const htmlFontSize = htmlWidth / 10
		// 设置 html 元素的 font-size
		htmlEl.style.fontSize = `${htmlFontSize}px`
	}
	
	// 初始执行一次
	setRemUnit()
	// 之后每次浏览器尺寸变化执行一次
	window.addEventListener("resize", setRemUnit)
</script>

直接引入淘宝开发的第三方库 lib-flexible 即可实现（推荐）。

计算元素的 rem 值：

手动计算：元素的 rem 值= 元素的 px 值 / 根节点的字体大小。

如果使用 VSCode 编辑器开发的话，可以安装一款插件来协助计算转换后的 rem 值。
使用 postcss 的 pxtorem 插件：开发过程中照旧使用 px 像素即可，在打包时借助 Webpack 可以完成单位的自动转化（推荐）。

vw 单位（最推荐）：

vw 自身将整个可见视口横向分成了 100 份，每一份就是 1vw。使用 vw 单位只需要考虑一个问题，就是如何将尺寸换算成 vw 单位即可。

实际开发中，只需要根据 UI 给的设计稿确定出一版的值（即设计稿这一版的值）即可。之后遇到不同大小的屏幕，会根据屏幕大小和已经计算出的 vw 的值自动调整元素的大小。

vw 相比于 rem 的优势：

不再需要去计算和设置 html 的 font-size 。
不再需要因为设置了 html 的 font-size ，而必须给 body 设置一个 font-size，以防止继承导致元素的 font-size 大小异常。
因为不依赖 font-size，所以不需要担心某些原因 html 的 font-size 被篡改导致页面尺寸混乱。
vw 相比于 rem 更加语义化，就是指 viewport 视口宽度的 1%。
vw 具备 rem 的所有优点。

手动计算：以 375px 的设计稿为标准，1vw = 3.75px，因此，元素的 vw 值 = 元素的 px 值 / 3.75 px。

如果使用 VSCode 编辑器开发的话，可以安装一款插件来协助计算转换后的 vw 值。

使用 postcss-px-to-viewport-8-plugin 插件：开发过程中照旧使用 px 像素即可，在打包时借助 Webpack 可以完成单位的自动转化（推荐）。

通过 npm 安装：npm i postcss-px-to-viewport-8-plugin -D。

在根目录下面新建 postcss.config.js 进行配置。

module.exports = {
  plugins: {
	postcsspxtoviewport({
        unitToConvert: 'px', // 需要转换的单位，默认为"px"
        viewportWidth: 375, // 设计稿的视口宽度
        unitPrecision: 5, // 单位转换后保留的精度
        propList: ['*'], // 能转化为vw的属性列表
        viewportUnit: 'vw', // 希望使用的视口单位
        fontViewportUnit: 'vw', // 字体使用的视口单位
        selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
        minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
        mediaQuery: false, // 媒体查询里的单位是否需要转换单位
        replace: true, //  是否直接更换属性值，而不添加备用属性
        exclude: undefined, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
        include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换
        landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
        landscapeUnit: 'vw', // 横屏时使用的单位
        landscapeWidth: 1920 // 横屏时使用的视口宽度
      })
    }
  }
};