移动端适配的5种方案

2023-12-25 00:39| 来源: 网络整理| 查看: 265

工作中接触到了移动端的开发，所以最近学习一下移动端相关内容。

移动端适配的目的

让拥有不同屏幕大小的终端设备拥有一致的 UI 界面，让拥有更大屏幕的终端展示更多的内容

了解viewport

viewport 即视窗、视口，用于显示网页部分的区域，在 PC 端视口即是浏览器窗口区域，在移动端，为了让页面展示更多的内容，视窗的宽度默认不为设备的宽度，在移动端视窗有三个概念：布局视窗、视觉视窗、理想视窗

布局视窗：在浏览器窗口css的布局区域，布局视口的宽度限制css布局的宽。为了能在移动设备上正常显示那些为pc端浏览器设计的网站，移动设备上的浏览器都会把自己默认的 viewport 设为 980px 或其他值，一般都比移动端浏览器可视区域大很多，所以就会出现浏览器出现横向滚动条的情况

视觉视窗：终端设备显示网页的区域

理想视窗：针对当前设备最理想的展示页面的视窗，不会出现横向滚动条，页面刚好全部展现在视窗内，理想视窗也就是终端屏幕的宽度。

布局视窗

在移动端不设置视窗宽度时，页面宽度默认为 980px，页面可以左右滚动

视觉视窗

理想视窗

页面的宽度为视窗的宽度，页面没有横向滚动条

viewport 详细设置

通过设置 viewport 可以设置页面大小，通过 meta 标签可以设置 viewport 信息，代码如下：

viewport 需要搭配如下几个属性使用：

属性含义取值width定义视口的宽度，单位为像素正整数或设备宽度device-widthheight定义视口的高度，单位为像素正整数或device-heightinitial-scale定义网页初始缩放值整数或小数，小数为缩小，反之放大maximum-scale定义缩放最大值整数或小数minimum-scale定义缩放最小值整数或小数user-scalable定义用户是否可以缩放yes/no 适配方案

将页面的宽度设置为设置的视窗宽度后，即可进行移动端适配工作了。

从适配的目的是在屏幕大小不同的终端设备拥有统一的界面，让拥有更大屏幕的终端展示更多的内容，从上面两个角度出发，核心思路是：页面内容充满整个视窗

1. rem 布局

rem 是CSS3新增的一个相对单位，它以 HTML 元素的 font-size 为比例：

/* 设置html元素的字体大小为 16px，即 1rem = 16px */ html { font-size: 16px; } /* 设置box元素宽 160px，10rem = 160px */ .box { width: 10rem; /* 160px */ }

修改HTML元素的字体大小可以成比例的调整以 rem 为单位的属性，通过这一个特性，我们可以实现将视窗按一定比例划分为一份一份的，当页面内元素刚好分完所有的份数，页面内容即充满整个视窗且无横向滚动条。

以宽度750像素的设计稿为例，有两个元素，一个元素占 550 个像素，另一个占 750 个像素：

// ... *{ padding: 0; margin: 0; } .w-550px { width: 550rem; height: 100px; background-color: rgb(209, 255, 240); } .full { width: 750rem; height: 100px; background-color: rgb(195, 200, 199); } function setRem() { // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改 const scale = document.documentElement.clientWidth / 750; document.documentElement.style.fontSize = scale + 'px'; } setRem(); window.onresize = setRem;

页面伸缩，网页布局也会进行伸缩。运行结果如下：

目前，除了IE8及更早版本外，所有浏览器均已支持rem。

1.1 搭配 postcss-pxtorem 搭建项目使用 vue-cli 创建项目 vue create rem-demo 设置 viewport 动态设置 rem 的值

创建 rem.js 文件：

// rem-demo/util/rem.js // 设置基准大小 const baseSize = 32 function setRem () { // 当前页面宽度相对于 750 宽的缩放比例 const scale = document.documentElement.clientWidth / 750 document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px' } // 初始化 setRem() window.onresize = function () { setRem() }

引入 rem.js 文件：

// rem-demo/src/main.js import './utils/rem' 安装并使用 postcss-pxtorem

安装 postcss-pxtorem

yarn add postcss-pxtorem --dev npm i postcss-pxtorem --save-dev

使用 postcss-pxtorem

// rem-demo/vue.config.js module.exports = { lintOnSave: true, css: { loaderOptions: { postcss: { plugins: [ require('postcss-pxtorem')({ rootValue : 16, //（数字，函数）根元素字体大小 unitPrecision: 5, //（数字）允许REM单位增长的十进制数字 replace: true, // （布尔值）替换包含rems的规则，而不添加后备 mediaQuery: false, // （布尔值）允许在媒体查询中转换px minPixelValue: 0, // （数字）设置要替换的最小像素值 selectorBlackList : [], // 忽略转换正则匹配项 propList : ['*'], // 可以从px转换为rem的属性，匹配正则 exclude: /node_modules/i // （字符串，正则表达式，函数）要忽略并保留为px的文件路径 }), ] } } } } 运行结果

例如：设计稿为 750*1136，我们需要一个盒子宽 375px：

/* 按照设计稿的宽度编写 */ .box { width: 375px; height: 400px; background-color: rgb(202, 246, 232); } /* 转换后 */ .box { width: 23.4375rem; height: 25rem; background-color: #caf6e8; } /* 使用 Px 和 PX 作为单位，pxtorem 将不进行转换 */ 1.2 总结

优点：rem 布局能很好的实现在不同尺寸的屏幕横向填满屏幕，且在不同屏幕元素大小比例一致

缺点：在大屏设备（Pad）上，元素尺寸会很大，页面显示更少的内容。

针对大屏改进方案：

限制 rem 的最大值，通过媒体查询，限制内容最大宽度，如：腾讯网、荔枝FM

在移动端浏览器 rem 方案是解决移动端适配的主流方案，这套方案的另一个名字叫做 flexible 方案，通过动态设置 rem 实现在不同尺寸的设备上界面展示效果一致。

在 lib-flexible 库里有这样一段话：

由于viewport单位得到众多浏览器的兼容，lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用viewport来替代此方。

可知，rem 方案的目的是解决 viewport 不兼容的问题，但是我个人认为，rem 的目的提供一种比例单位，不仅可以解决移动端适配问题，也还有其他的用处。

2. vw/vh 布局

vw/vh 方案与 rem 方案类似，都是将页面分成一份一份的，只不过 vw/vh 是将页面分为 100 份，1vw = device-width/100

2.1 搭配 postcss-px-to-viewport 搭建项目使用 vue-cli 创建项目 vue create vw-demo 设置 viewport 安装并使用 postcss-px-to-viewport

安装 postcss-px-to-viewport

yarn add postcss-px-to-viewport --dev npm i postcss-px-to-viewport --save-dev

配置 .postcssrc.js

module.exports = { plugins: { autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等 'postcss-px-to-viewport': { unitToConvert: 'px', // 要转化的单位 viewportWidth: 750, // UI设计稿的宽度 unitPrecision: 6, // 转换后的精度，即小数点位数 propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换 viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw selectorBlackList: ['wrap'], // 指定不转换为视窗单位的类名， minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换 mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false replace: true, // 是否转换后直接更换属性值 exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配 landscape: false, // 是否处理横屏情况 }, }, }; 运行结果

以 750*1136 的设计稿为例，设计一个宽 375px 的盒子

.test-vw { width: 375px; height: 100px; font-size: 40px; text-align: center; line-height: 100px; background: #13b5b1; } /* 转换后 */ .test-vw { width: 50vw; height: 13.333333vw; font-size: 5.333333vw; text-align: center; line-height: 13.333333vw; background: #13b5b1; }

运行效果：

2.2 总结

优点：vw、vh布局能良好的实现在不同尺寸的屏幕横向填满屏幕，使用 postcss-px-to-viewport 能很好的帮我们进行单位转换

缺点：

无法修改 vw/vh 的值，在大屏设备（Pad）中元素会放大，且无法通过 js 干预兼容性- 大多数浏览器都支持、ie11不支持少数低版本手机系统 ios8、android4.4以下不支持 3. 百分比布局

在 css 中，我们可以使用百分比来实现布局，但是需要特定宽度时，这个百分比的计算对开发者来说并不友好，且元素百分比参考的对象为父元素，元素嵌套较深时会有问题。

案例：设计稿为 750*1136，我们需要一个宽度为 200px 的盒子

.box { /* w = 200 / (750/100) = 26.66667 */ /* 可知，计算复杂，且会存在误差 */ width: 26.6%; }

扩展：子元素的 width 和 height 百分比参考对象是父元素的 width 和 height，margin、padding 的参考对象为父元素的 width，border-radius、background-size、transform: translate()、transform-origin 的参考对象为自身宽高

4. 响应式布局

通过媒体查询，可以针对不同的屏幕进行单独设置，但是针对所有的屏幕尺寸做适配显然是不合理的，但是可以用来处理极端情况（例如 IPad 大屏设备）或做简单的适配（隐藏元素或改变元素位置）

CSS3 @media 查询属性详解

媒体查询案例：

body { background-color: yellow; } /* 针对大屏产品 ipad pro */ @media screen and (min-width: 1024px) { body { background-color: blue; } } 5. px 为主，搭配 vw/vh、媒体查询与 flex 进行布局

先查看一下当前各大网站移动端适配的结果：

小屏幕自适应，限制最大宽度：腾讯网、荔枝FM

布局高度固定，宽度自适应：淘宝网、百度、网易

移动端适配的宗旨是：让拥有不同屏幕大小的终端设备拥有一致的 UI 界面，让拥有更大屏幕的终端展示更多的内容，那么布局高度固定、宽度自适应的方案针对文本较多的网页（百度、网易）是更好的，针对大屏幕，腾讯网和荔枝FM的做法是限制最大宽度来让大屏有更好的体验。

我们从页面编写的角度出发，页面中更多的是文本和布局，关于文本，我们应该使用 px 作为单位，来实现在大屏设备显示更多的内容，而不是更大的文本；关于布局，我们可以使用 flex 实现弹性布局，当实现特定宽高元素时，可以适当的使用 vw/vh，当特定的值使用 vw/vh 计算复杂或存在误差时，也可以使用 rem

适配流程编写标签设置 viewport 的内容 width=device-width，让网页宽度等于视窗宽度在 css 中使用 px 在适当的场景使用flex布局，或者配合vw进行自适应在跨设备类型的时候（pc 手机平板）使用媒体查询在跨设备类型如果交互差异太大的情况，考虑分开项目开发总结

上文简单总结了 5 种移动端适配方案

当前最流行的依然是第一种 rem 布局，能很好的按照设计稿进行开发，搭配媒体查询能让很好的解决大屏问题，比如：腾讯网、荔枝FM

关于第二种 vw/vh 布局方案，我看到蛮多文章在推荐，由于还没有在项目中真正实践过，因为我们无法干预 vw/vh 的值，在大屏的体验应该不是很良好，所以我不能做判断

关于第五种 px 为主，搭配 vw/vh、媒体查询与 flex 进行布局，个人认为部分地方可以引入 rem，也能很好的按照设计稿开发，且能解决大屏问题，可以参见：淘宝网、百度、网易

在我个人看来，第五种方案是很好的，但是暂时还没找到一套方法论来进行论证

以上就是本文的全部，有不对的地方还请指正

参考

面试官：你了解过移动端适配吗？

开课吧-一次说清楚，以后不要再问移动端怎么适配了！

viewport移动端适配

Vue-cli3.0 px转换为rem,完成h5自适应

前端响应式布局原理与方案（详细版）

【本文地址】

移动端适配的5种方案

移动端适配的5种方案

今日新闻

推荐新闻