首页 > 分享 > 如何做移动端的样式适配

如何做移动端的样式适配

花匠小妙招
2024-12-07 18:35

常见方案响应式设计（Responsive Design）：
使用 CSS 媒体查询（Media Queries）来根据设备的特征（如屏幕宽度、高度、方向等）应用不同的样式。
通过设置百分比宽度、最大宽度或相对单位（比如 rem）来确保元素相对于其容器的大小进行自适应。

@media only screen and (max-width: 768px) { /* 在小屏幕上的样式 */ } @media only screen and (min-width: 769px) and (max-width: 1024px) { /* 在中等屏幕上的样式 */ } @media only screen and (min-width: 1025px) { /* 在大屏幕上的样式 */ } 1234567891011 弹性布局（Flexbox）和网格布局（Grid）：
使用弹性布局和网格布局可以更方便地创建灵活的布局，使页面元素能够根据屏幕大小自动调整位置。

.container { display: flex; flex-wrap: wrap; } .item { flex: 1; } 12345678 移动端优先（Mobile-first）：
首先定义移动端的样式，然后使用媒体查询逐渐添加更大屏幕上的样式，以确保基本功能在小屏幕上也能正常工作。

/* 移动端样式 */ body { font-size: 14px; } /* 大屏幕样式 */ @media only screen and (min-width: 768px) { body { font-size: 16px; } } 1234567891011 em 相对单位

好多人都认为 em 就是相对于父元素 font-size，实际上在不同的 CSS 属性当中使用 em 其相对的目标也是不同，如下：

用于 font-size 中则是相对于父元素 font-size 大小用于其他属性（如 width，height）中使用是相对于（如 width，height) 大小 rem (root em) 相对单位

rem 是 CSS3 新增的一个相对单位，它只相对于根元素 html 的 font-size 字体大小，rem 与 em 的区别在于：

rem 相对于 html 根元素的，因此在 body 标签里面设置 font-size 是不起作用的因此 rem 就可做到目标元素与根元素间保持成比例的大小关系，又可以避免字体大小逐层复合的连锁反应等，例如公共的字体大小可以在 body 中设置即可与之相关的还有 vmin 和 vmax 两个单位

vmin 和 vmax 代表的是视口宽度和视口高度中的最小值和最大值
vmin = 视口高度 vh 和宽度 vw 间的最小值
vmax = 视口高度 vh 和宽度 vw 间的最大值

rem 适配（等比适配）核心原理

设备视口宽为 375px将设备视口分成 10 份，设置根元素 html 的 font-size = 375 ÷ 10 = 37.5 px，即 1 rem = 37.5 px

(function (n = 10) { const dEl = document.documentElement; function setRem() { const rem = dEl.clientWidth / n; dEl.style.fontSize = rem + "px"; } // 初始化执行 setRem(); // 视口大小变动时执行 window.onresize = setRem; })(); 1234567891011121314 设计稿宽为 750px将设计稿也分成 10 份，每份大小 = 750 ÷ 10 = 75 px此时设计稿上的 “点我拍照”（font-size: 34px）的文案转换成符合设备视口对应的 rem 就为：设备视口中文字 font-size = 34 ÷ 75 = 0.4533333333333333 rem ≈ 0.45 rem vw/vh 适配

前面说过，vw 和 vh 是将视口宽/高都分成 100 份，相对于设备视口 375px 来说 1vw = 375 ÷ 100 = 3.75px。
经过了 rem 适配方案的介绍，vw/vh 这种适配方式就是相当于把替换了原本的 rem 单位，因此，这个方式的计算方式和 rem 的方式如出一辙，区别就在于：

rem 的适配方式支持自定义将设备视口划分为 n 份，n 可以是任何正确值
vw/vh 就是将设备视口划分为 100 份，不支持自定义

因此，假设将设计稿 750px 中的 34px 转换为设备视口 n vw 就等于 n = 34 ÷ 7.5 = 4.533333333333333 vw ≈ 4.53 vw。

less & sass 中自定义函数 px2vw

css: { postcss: { plugins: [ pxtovw({ viewportWidth: 750, viewportUnit: "vw", }), ]; } } 12345678910 第三方组件库如何做适配？ Viewport 布局

Vant 默认使用 px 作为样式单位，如果需要使用 viewport 单位 (vw, vh, vmin, vmax)，推荐使用 postcss-px-to-viewport 进行转换

Rem 布局适配

postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
lib-flexible 用于设置 rem 基准值

桌面端适配

若需要在桌面端使用 Vant，可以引入 @vant/touch-emulator，这个库会在桌面端自动将 mouse 事件转换成对应的 touch 事件，使得组件能够在桌面端使用