移动端适配方案
移动端适配
方案 1：rem + html font-size
方案 2：vw
rem + html font-size
rem 是相对于 html 元素的 font-size 来设置的单位，通过在不同屏幕尺寸下动态修改 html 元素的 font-size 可达到适配效果
在开发中，我们只需要考虑两个问题：
针对不同的屏幕尺寸设置不同的 html font-size
将元素尺寸单位转为 rem
动态设置 html font-size
方法一：通过媒体查询设置 html font-size
思路：通过媒体查询根据不同屏幕尺寸设置不同的 html font-size
缺点：① 如果动态改变屏幕尺寸，不能实时更新、 ② 只能针对某个尺寸范围设置 html font-size
@media screen and (min-width: 320px) { html { font-size: 20px; } } @media screen and (min-width: 375px) { html { font-size: 24px; } } @media screen and (min-width: 414px) { html { font-size: 28px; } } @media screen and (min-width: 480px) { html { font-size: 32px; } } .box { width: 5rem; height: 5rem; background-color: blue; }
1234567891011121314151617181920212223242526272829方法二：通过 JS 设置 html font-size
思路：通过监听屏幕尺寸的变化动态修改 html font-size
一般会将 html font-size 设置为屏幕宽度的 1/10，方便计算
function setRemUnit() { const htmlEl = document.documentElement; const htmlFontSize = htmlEl.clientWidth / 10; htmlEl.style.fontSize = htmlFontSize + 'px'; } setRemUnit(); window.addEventListener('resize', setRemUnit); 1234567
px 与 rem 的单位换算
假设原型图中屏幕宽度为 375px，现有一宽度为 100px 的 div。我们想将 100px 转成对应的 rem 值：
根元素 html 的 font-size = 375px / 10 = 37.5px （37.5px 即为 “基准字体大小”）
元素的 rem 值 = 100px / 37.5px
手动计算
编写 scss 函数：
$baseFontSize: 37.5px; // 基准字体大小 @function pxToRem($pxValue) { @return $pxValue / $baseFontSize * 1rem; } 1234
使用 scss 函数编写样式：
.example { font-size: pxToRem(24px); // 将 24px 转换为对应的 rem 值 margin: pxToRem(16px) pxToRem(8px); // 将 16px 和 8px 转换为对应的 rem 值 } 1234
工程化自动计算
对于 Webpack 项目，安装 postcss-pxtorem 依赖包、配置 webpack.config.js 文件：
npm install postcss-pxtorem -D 1
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const postcssPxToRem = require('postcss-pxtorem'); const stylesHandler = MiniCssExtractPlugin.loader; const postcssLoader = { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ postcssPxToRem({ rootValue: 37.5, // 基准字体大小, 默认 16 propList: ['*'], // 转换的属性, 默认 ['font', 'font-size', 'line-height', 'letter-spacing'] }), ], }, }, }; const config = { // ... module: { // ... rules: [ // ... { test: /.css$/i, use: [stylesHandler, 'css-loader', postcssLoader], }, ], }, };
12345678910111213141516171819202122232425262728293031对于 Vite 项目，安装 postcss-pxtorem 依赖包、配置 vite.config.js 文件：
npm install postcss-pxtorem -D 1
import { defineConfig } from 'vite'; import pxtorem from 'postcss-pxtorem'; export default defineConfig({ // ... css: { // ... postcss: { plugins: [pxtorem({ rootValue: 37.5, propList: ['*'] })], }, }, }); 123456789101112
现在，正常编写样式，px 会自动转换为 rem：
.example { font-size: 24px; /* 将转换为 0.64rem */ margin: 16px 8px; /* 将转换为 0.43rem 0.21rem */ } 1234
如果不想 px 转换为 rem，可以在样式中使用 PX，例如：font-size: 24PX 。
vw 单位
100vw 相当于整个视口的宽度 innerWidth，1vw 相当于视口宽度的 1%，将 px 转换为 vw 即可完成适配
vw 相对于 rem 的优势：不需要考虑 html font-size 的问题
事实上，rem 作为一种过渡的方案，它利用的也是 vw 的思想
px 与 vw 的单位转换
假设原型图中屏幕宽度为 375px，有一宽度为 100px 的 div。我们需要将 100px 转成对应的 vw 值：
1vw = 375px / 100 = 3.75px元素的 vw 值 = 100px / 3.75px手动计算
编写 scss 函数：
$baseWidth: 375px; // 设计稿宽度 @function pxToVw($pxValue) { @return $pxValue / $baseWidth * 100vw; } 1234
使用 scss 函数编写样式：
.example { width: pxToVw(100px); // 将 100px 转换为对应的 vw 值 margin: pxToVw(16px) pxToVw(8px); // 将 16px 和 8px 转换为对应的 vw 值 } 1234
工程化自动计算
安装 postcss-px-to-viewport-8-plugin 依赖包、配置 webpack.config.js 文件：
npm install postcss-px-to-viewport-8-plugin -D 1
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const postcssPxToViewport = require('postcss-px-to-viewport-8-plugin'); const stylesHandler = MiniCssExtractPlugin.loader; const postcssLoader = { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ postcssPxToViewport({ viewportWidth: 375, // 设计稿宽度, 默认 320 }), ], }, }, }; const config = { // ... module: { // ... rules: [ // ... { test: /.css$/i, use: [stylesHandler, 'css-loader', postcssLoader], }, ], }, };
123456789101112131415161718192021222324252627282930正常编写样式，px 会自动转换为 vw：
.example { width: 100px; /* 将转换为 26.67vw */ margin: 16px 8px; /* 将转换为 4.27vw 2.13vw */ } 1234
相关知识
移动端
手机移动端快速开发
如何从零高效的开发一款适配 Android 和 iOS 的移动端App
基于深度卷积神经网络的移动端花卉识别系统
Html+Css+js实现春节倒计时效果（移动端和PC端）
移动Web实训DAY
一分钟告诉你建行移动端网络学习怎么学
简约排版鲜花植物类移动端店铺首页
电商平台移动端应用开发及维护服务合同.doc
下列哪项属于移动端交易?
网址: 移动端适配方案 https://m.huajiangbk.com/newsview849600.html
| 上一篇: 怎么做移动端适配？ |
下一篇: 移动端Web App 的屏幕适配 |
