移动端适配方案阮一峰（移动端适配布局）

大家好！今天让创意岭的小编来大家介绍下关于移动端适配方案阮一峰的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。

开始之前先推荐一个非常厉害的Ai人工智能工具，一键生成原创文章、方案、文案、工作计划、工作报告、论文、代码、作文、做题和对话答疑等等

只需要输入关键词，就能返回你想要的内容，越精准，写出的就越详细，有微信小程序端、在线网页版、PC客户端

官网：https://ai.de1919.com。

创意岭作为行业内优秀的企业，服务客户遍布全球各地，如需了解SEO相关业务请拨打电话175-8598-2043，或添加微信：1454722008

本文目录:

• 1、移动端H5页面适配问题研究

• 2、H5+CSS3移动端适配技术

• 3、Vant移动端rem适配方案

• 4、移动端，PC端是怎么做适配的？

一、移动端H5页面适配问题研究

刚开始做移动端web开发的同学应该都碰到过页面适配问题，为什么我在开发手机上调试好的页面在其他手机会有这样或那样的样式问题？ viewport 我也设置了，为什么还是显示不正常？难道我要为每种手机屏幕写媒体查询，有没有简单的方式，可以不用关注手机屏幕的差异性呢？

百度中搜索 移动端H5页面适配 关键字，大概可以得到180多万的搜索结果，由此可见这个问题也得到很多人的关注。本文的目的主要是分析解决移动端H5页面适配问题过程中牵扯到的知识点，然后梳理分析目前常见的适配解决方案。

由于本文内容较长，下面先给出文章的提纲：

1.1理解移动端单位

　 1.2理解viewport

2.1图片高清适配

　 2.2字体大小适配

　 2.3布局宽度适配

---这里是分隔符，正文开始---

不知道正在看文章的你对上面列出来的这些单位是不是很熟悉，如果是的话，就可以跳过了。

理解这些单位的用法以及区别，对理解移动端页面适配有很大的帮助。为了让你对上面的单位有个大体的认知，这里把上面的单位分成了三类：

下面分别对每个单位展开分析：

*** dpi / ppi ***

** dpi ** , dot per inch ，每英寸的点数；打印或印刷领域使用的单位，代表打印机每英寸可以打印出的点数 。

ppi , pixel per inch ，每英寸的像素数，像素密度；表示图像或者显示器单位面积上像素数量。

dpi 和 ppi 都是描述分辨率的单位，但是两者是有区别的，但是在描述手机分辨率时，可以认为两者意义相同，以前android设备偏向于使用 dpi ，ios设备偏向于使用 ppi ，目前android和ios统一使用 ppi 描述手机屏幕的像素显示密度。

ppi的计算方法：

*** ldpi、mdpi、hdpi、xhdpi、xxhdpi ***

android对移动设备不同屏幕分辨率的分类。

*** pt，pc，sp ***

** pt ** ，磅（point的音译），印刷中使用的表示字型的大小单位，1inch = 72pt （印刷中这个关系成立，ios中不成立），ios开发中使用的逻辑单位，是和设备无关的单位。

** pc ** 印刷中使用的单位，1pc = 12pt，不需要关注。

** sp **， scale independent pixel ，android设备中用来显示字体大小的，和设备无关的尺寸，当设置字体大小单位为sp时，android系统字体大小会影响设置的字体渲染时的大小。

*** dip / dp ***

** dp/dip**， device independent pixel，表示设备独立像素，和设备无关的尺寸，相同的dp/dip值，不同设备展示的效果是一样的。

android使用的单位，之前偏向使用dip，目前建议使用dp。

android设备中，规定160ppi的屏幕，1dp = 1px；320ppi的屏幕，1dp = 2px，所以android设备中dp的计算方法：dp = px * (ppi / 160)，这里的px是指设备的物理像素点。

和ios开发中用的pt单位类似。

*** px ***

** px ** ，像素，有两种像素概念，一种是网页设计中使用的css像素，一种是原生移动系统使用的物理像素。

作为css像素时，表示的也是一种设备无关单位，与android中使用的dp类似，默认情况下与系统分辨率下的像素大小相同，标清设备中，一个css像素和一个设备物理像素大小相同；在高清设备中，一个css像素可以大于或者等于多个设备物理像素，具体一个css像素，需要多少个物理像素来展示，浏览器会根据dpr计算。

原生移动系统中使用px单位时，表示的就是屏幕的物理像素点，每种屏幕的物理像素点大小可能不一样。

*** dpr ***

** dpr ** ，device pixel ratio， 横向或者纵向设备物理像素数量与设备独立像素数量的比值，浏览器中可以通过window.devicePixelRatio获取(存在兼容性问题)。

对于原生app，ios和android系统会自动根据dpr计算出渲染时需要的px值，最终不同屏幕上展示出来的大小很接近；而移动端页面渲染时想要做到这一点，就必须首先得到设备的dpr，然后再根据dpr计算渲染需要的px值。

ios设备中iphone3的dpr为1；iphone4,5,6,7的dpr为2；iphone6+,7+的dpr为3。iphone6+和iphone7+实际计算出来的dpr应该时2.6左右，但是官方还是建议dpr为3，这是因为ios系统利用了一种“缩减像素采样”算法，自动缩减到2.6。

android设备中dpr值有多种，可知的有0.75，1，1.5，1.75，2，2.5，2.75，3，4等。

*** em，rem ***

** em ** 相对单位，CSS2引入的单位，作为字体大小使用时和百分比单位类似，都是相对于最近的父元素设置的字体大小，在body上设置字体大小为100%和设置字体大小为1em是一样的效果，默认情况下浏览器的字体大小为16px，这样只要浏览器默认得字体大小不变，1em = 16px。

** rem ** 相对单位，root em，CSS3新增的单位，作用和em类似，唯一的区别就是em是相对父元素的，rem是相对html根节点的，即所有使用rem单位的子元素的字体大小都是相对根节点的，所以使用rem可以避免使用em带来的子元素字体大小逐层复合的连锁反应。

更多关于em，rem的知识参见这篇文章 理解web开发中的em单位和rem单位 。

*** 分辨率 ***

平时说的手机屏幕分辨率，也称为物理分辨率或者原生分辨率，通常包括纵向分辨率和横向分辨率，例如iphone6的物理分辨率是1334 x 750，其中纵向分辨率是1334px，横向分辨率是750px，表示纵向方向可以显示1334个物理像素点，横向上可以显示750个物理像素点，这里描述分辨率使用的px单位，和css中使用的px单位意义不一样，这里代指物理设备的像素点。

还有一种分辨率叫做系统分辨率，例如iphone6的系统分辨率是667 x 375，其中高度是667pt，宽度是375pt，这里描述分辨率使用了pt单位，是一种设备无关单位。

屏幕尺寸相同的设备，物理分辨率越高，ppi也就越大，绝对单位面积上展示的物理像素数量越多，展示图片也就越细腻。

苹果把ppi > 300的屏幕称为视网膜屏,Retina屏。

传统桌面web页面布局通常是定宽布局，但是定宽布局的方式对移动端却不适用，原因手机屏幕尺寸大小各异，定宽布局可能在某些手机上出现横向滚动条，导致阅读效果比较差。

为了让手机有更好的网页浏览体验，苹果引入了viewport，为页面提供了一个虚拟的布局窗口，在这个虚拟的布局窗口中渲染页面，然后系统会把渲染好的页面自动缩放到手机屏幕大小。

虽然viewport还没有成为正式的规范，但是现在绝大部分浏览器都支持viewport。

在桌面浏览器中，viewport严格等于浏览器窗口大小，页面渲染时，页面宽度不会超过浏览器的宽度。

移动端屏幕太窄，为了提供更好的页面体验，移动端提供了两种viewport： 可视viewport ， 布局viewport 。

可视viewport 就是当前屏幕正在展示的区域，也就是移动设备屏幕的宽度，宽高通过window.innerWidth和window.innerHeight获取（存在兼容性问题）。

布局viewport ，页面布局实际用到的viewport，通常比可视viewport要宽，宽高通过document.documentElement.clientWidth和document.documentElement.clientHeight获取。

移动端还有一种viewport概念，可以理解为 理想viewport ，作用就是在理想viewport下，不同移动设备，展示的字体大小接近，并且不需要用户缩放就可以展示全部的页面内容。

理想viewport的宽度默认等于可视viewport的宽度，但是对同一台设备来说，这个理想viewport的宽度是可以改变的，而可视viewport的宽度是不可变的。

如何使用理想viewport来布局页面呢？只需要设置viewport的width等于device-width。

viewport的属性，推荐使用以及支持度较广泛的属性只有6个： width ， height ， initial-scale ， maximum-scale ， minimum-scale ， user-scalable 。

width 设置viewport布局宽度，内核是webkit的浏览器默认值是980px，取值范围在200-10000px，也可以取值为设备宽度device-width（等于横向设备无关像素数量）。

height 设置viewport布局高度，默认值依赖设备长宽比以及宽度值，取值范围在223-10000px，也可以取值为设备高度device-height。

initial-scale 设置初始缩放比例，页面第一次加载时的缩放比例。默认比例依赖于显示密度。在密度低于200 dpi的显示设备上，比例为1.0。在密度介于200及300 dpi之间的显示设备上，比例为1.5。对于具有300 dpi以上密度的显示设备，比例为密度/150 dpi向下取整的结果。取值范围由 maximum-scale 属性以及 minimum-scale 属性决定。如果设置 initial-scale 值为1， width 默认是device-width， height 默认是device-height

initial-scale 设置的缩放大小会改变理想viewport的大小，不会改变可视viewport的大小，也不会改变布局viewport的大小，这是某些适配方案依赖的基本原理，也是解决 1px问题 的关键。后面分析适配方案时，动态viewport适配方案就依赖这个知识点。

maximum-scale 允许用户缩放到的最大比例，默认值是0.5，范围从0到10.0。

minimum-scale 允许用户缩放到的最小比例，默认值是5.0，范围从0到10.0。

user-scalable 用户是否可以手动缩放，值可以是：yes/true允许用户缩放；no/false不允许用户缩放。

图片适配的目的是为了在页面中可以高清还原设计图中用到的图片。

页面中用到的图片是否清晰和展示页面的硬件设备的dpr以及图片分辨率这两个因素有关，下面会通过三个例子来说明这个问题。

***示例一 ***

例如dpr=2的设备，1个设备无关像素(android中的1dp，ios中的1pt)需要4个设备物理像素点填充。对于尺寸为100 x 120 (px)的图片，如果用 <img> 来展示，图片显示时会产生模糊现象。

原因：渲染图片时，宽度是100px，所以横向会占用100个设备无关像素，高度是120px,所以纵向会占用120个设备无关像素，每个设备无关像素又需要2x2个物理像素点来填充，而图片在每个设备无关像素(px)单位上提供的像素点只有1x1个，这时，系统通过一定的算法在这1个像素点上就近取色，取到4个颜色(这4种颜色接近但是有一定区别)之后，当成4个像素点，然后填充到1个设备无关像素点上，这样就导致图片显示时模糊，dpr越大，这种方式显示的图片越模糊。

示例二

还是dpr=2的设备，但是准备了一个尺寸为200 x 240 (px)的图片，还是用 <img> 来展示，这时显示的图片就比较清晰了。

原因：这时图片本身可以在一个设备无关像素单位上提供2x2个物理像素点，设备展示图片时直接拿图片提供的像素点来填充就可以了，不用对像素点进行处理，所以可以比较清晰的显示图片。

示例三

还是dpr=2的设备，这次准备一个尺寸400 x 480 (px)的图片，还是用 <img> 来展示时，这种情况展示的图片缺少锐利度，也影响了图片的清晰度，但是很难看出来。

原因：图片本身在一个设备无关像素点单位上提供了4x4个物理像素点，而设备本身只需要2x2个物理像素点，所以会通过缩减采样算法，在图片提供的4x4个物理像素点中，选取颜色接近的2x2个物理像素点填充到设备无关像素点上，所以也会产生一定的色差，这种情况下图片尺寸越大，这种色差也就越明显，但是人眼很难区分这种色差。

下面是我在oppo的一款手机上的测试结果，结合这张效果图就可以很好的理解上面的三个示例了：

图片适配最佳实践

要想高清显示图片，如果条件允许(有单独的图片服务器)最直接的解决办法，肯定是根据设备的dpr，为不同dpr的设备加载不同倍率大小图片显示；没这种条件的或者对用户体验没有很高要求的，只能选一种折中的方案了，一般情况下只需要提供布局尺寸2倍大小的切图就可以了，也就是只高清适配dpr=2的设备，但是dpr为3或者4的设备展示效果也能接受，不容易看出来模糊现象。目前主流机型的dpr也就在2和3之间。

字体适配目标主要还是看设计要求，主要有两种：

1.不同屏幕下，字体显示大小都一样，即需要等宽显示字体；

2.不同屏幕下，一行能显示的字数固定，即需要按比例缩放字体大小；

开始分析之前，先看下这两种字体适配的示例：

第1种字体适配方案的示例

第2种字体适配方案的示例

下面就来具体分析下两种字体适配方案的原理以及优劣。

** 第1种字体适配方案原理 **

在开始分析这种方式的原理之前，先通过一张图理解下px和dp以及绝对长度之间关系。

由上图可知字体大小只与css单位px有关，而每个设备上px的绝对宽度又和设备的绝对宽度以及绝对宽度上划分出的设备无关像素点dp有关；只要设备的横向dp数量与绝对宽度的比值(dp/cm)相同，就可以保证px在不同设备上展示的绝对宽度是一样的；如果dp/cm的比值过大，那么px的绝对长度就会变小，看起来就会显小；如果dp/cm的比值过小，那么px的绝对长度就会变大，看起来就会显大；一般来说手机屏幕分辨率越高，相同px值的字体看起来就会越小。

iphone5和6的dp/cm比值十分接近，所以12px大小的字体在这两种手机上显示的大小基本一样，看不出来区别，但是iphone6+的dp/cm比值要比iphone5,6的略大，这就导致12px大小的字体在6+上显示的比5，6上显示的略小，上面的淘宝对比图仔细分辨可以看出来。

android的手机屏幕dp/cm比值在各个设备之间也有差异性，并且比较有多样性。所以同样12px大小的字体，各个设备显示时也是有差别的。

这种显示差别在iphone系列手机中可以忽略不计，但是android碎片化比较严重，完美兼容各种机型没有必要，主流机型中这种显示差别也可以忽略不计，所以采用这种方式进行字体适配只需要px值设置成一样的就可以了。

** 第1种字体适配方案优缺点**

优点：1.不同设备中字体大小显示一致，比较统一；2.大屏手机可以显示更多的文字；

缺点：1.由于单个字体宽度是定死的，所以在有些机型下可能会影响页面布局；

** 第2种字体适配方案原理 **

在设计稿中，计算出字体大小相对于基准字体大小（基准字体大小可以选择设计稿宽度，一般为了计算方便，会把设计稿宽度/10得到的值作为基准字体大小）的比值，然后在不同布局宽度下，先得到基准字体大小，再根据上面计算出来的比值，就可以计算出来不同布局宽度下的字体大小，也就是不同布局宽度下等比例缩放字体。

利用rem的特性，在页面的html标签上设置一个基准字体大小，就可以实现这种方式。

例如，宽是750px的设计图中，字体大小是32px，计算出基准字体大小为75px，比值为 32 * 10 / 75 = 0.426667。

如果布局宽度是414px，此时基准字体大小变成 414 / 10 = 41.4px，然后设置<html style="font-size:41.4px">，字体大小是0.426667rem，计算出来的字体大小为41.4x0.42667=17.66px。

如果布局宽度变成360px，此时基准字体大小变成36px，然后设置<html style="font-size:36px">，字体大小仍然用0.426667rem表示，计算出来的字体大小为36x0.42667=15.36px。

750/32 约等于 414/17.66 约等于 360/15.36，这样就做到了等比缩放字体了。

** 第2种字体适配方案优缺点**

缺点：1.小尺寸设备屏幕上字体显示小，大尺寸设备屏幕字体显示大，导致字体显示不一致；2.不能发挥大屏手机的优势（显示更多的字）；3.字体大小会出现奇数或者小数点大小的值，某些字体不支持这些值，渲染时增加计算量；

优点：1.适配简单，不同设备不会影响页面布局，可以和设计稿布局保持一致；

布局中对宽度的适配，也是采用rem来实现，和上面第2种字体大小适配方式中的原理类似，也是计算出一个比例值，然后不同布局宽度中等比缩放，这里偷下懒，不在赘述。

目前的解决方案有两类

第一类就是js动态生成viewport标签，标签中的initial-scale值根据设备的dpr计算，不同dpr设备的viewport值不同。

第二类就是js不操作viewport，每个设备都使用理想viewport来布局。

** 动态viewport解决方案分析 **

这里分析两个动态viewport解决方案：

1.手机淘宝的flexible方案；

2.hotcss方案；

手机淘宝的flexible方案 ，特点：

1.仅针对iphone生成动态viewport，因为目前iphone的dpr只有1，2，3三种，android的dpr很有多种，不具有一致性；

2.字体大小不用rem做缩放处理，仍然使用px单位，设置不同dpr下对应的字体大小；

3.宽度利用rem等比缩放；

4.允许强制定义dpr;

使用时页面头部需要引入 flexible.js .

hotcss方案 ，特点：

1.不区分iphone和android，dpr只取三种1,2,3，android的dpr做近似处理；

2.宽度以及字体利用rem等比缩放；

3.允许强制定义dpr;

使用时页面头部需要引入 hotcss.js

动态viewport方案之所以会称为动态viewport是因为，这个适配过程会根据系统dpr值设置initial-scale属性的大小，大小等于1/dpr。

** 静态viewport解决方案分析 **

利用rem特性，先根据标注图算出各元素相对于设计稿宽度的比值，这个比值就作为rem值，然后页面布局时就用算出的rem值表示，并且在html根元素设置当前布局页面宽度作为基准。更rem值计算具体的解释可以参考这篇文章 使用Flexible实现手淘H5页面的终端适配 。通过这种方式设置标签元素的宽高，位置以及字体大小，这样利用rem特性就可以在不同手机屏幕上实现等比缩放。

参考资料

https://github.com/amfe/article/issues/17

http://www.cnblogs.com/pigtail/archive/2013/03/15/2961631.html

二、H5+CSS3移动端适配技术

近期因工作需求，做了一个Vue APP，过程中遇到了曾今经常听说，但从未真正接触过的移动端适配问题，中间遇到了很多挫折，经过了5天吧，这个小app经过来回重写样式好几遍，终于找到了门道，应该算是正路吧，我身边也没有真正做h5 app的伙伴，靠着自己百度、揣摩，外加朋友的帮助，学会了适配的方案。

解释

vw：屏幕可视宽度百分比

vh：屏幕可视高度百分比

vmin：屏幕可视宽度和高度中较小的那个，用这个单位，可以让字体在移动设备无论横屏还是竖屏都保持大小不变

vmax：屏幕可视宽度和高度中较大的那个，用处同上vmin

%：相对于父级元素的百分比尺寸

由于设备的高度会在不同的情况下受到影响，所以我们主要使用vw去控制各个元素的尺寸，因为设备的可视宽度正常情况下是不会有什么东东占用的，我没遇到过，所以设备的宽度就是可视宽度，那么宽度不变，我们使用vw去控制元素尺寸的时候，也就不会受到任何影响了，无论在什么情况下，都能保证元素的位置和尺寸不变了

而我们在适当的情况下需要使用%，因为vw、vh等都是设备的整个屏幕的可视宽高百分比，而有时候我们要的百分比是相对父级元素的，所以不要随便乱用，要想好再用

下面展示下把web app打包成apk全屏应用和在浏览器中浏览的效果

px 转 rem，还有写各种屏幕的不同样式的方案是过去的方案，当前主流使用CSS3的新特性单位，才最佳

三、Vant移动端rem适配方案

1、Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具 ：

[ lib-flexible 用于设置 rem 基准值，设置根字体的大小

postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem

2、使用 lib-flexible 动态设置 REM 基准值

html 标签的字体大小

2.1 安装

// yarn add amfe-flexible

​cnpmiamfe-flexible-S

2.2 然后在 main.js 中加载执行该模块

import    'amfe-flexible'

2.3 最后测试：在浏览器中切换不同的手机设备尺寸，观察 html 标签 font-size 的变化

. 例如在 iPhone 6/7/8 设备下，html 标签字体大小为 37.5 px

. 例如在 iPhone 6/7/8 Plus 设备下，html 标签字体大小为 41.4 px

3、使用 postcss-pxtorem 将 px 转为 rem

3.1  安装

// yarn add -D postcss-pxtorem

// -D 是 --save-dev 的简写

cnpminstallpostcss-pxtorem-D

3.2  然后在 项目根目录 中创建 .postcssrc.js 文件

module.exports={

plugins: {

'autoprefixer': {

browsers: ['Android >= 4.0','iOS >= 8']

   },

'postcss-pxtorem': {

rootValue:37.5,

propList: ['*']

   }

  }

}

3.3  配置完毕，重新启动服务

npmrunserve

最后测试： 刷新浏览器页面 ，审查元素的样式查看是否已将 px 转换为 rem

转换之前的样式

4、注意事项：

该插件 不能转换行内样式中的 px ，例如 <div style="width: 200px;"></div>

5、postcss-pxtorem 插件的配置

rootValue：表示根元素字体大小，它会根据根元素大小进行单位转换

propList 用来设定可以从 px 转为 rem 的属性

例如 * 就是所有属性都要转换，width 就是仅转换 width 属性

rootValue 应该如何设置呢？

如果你使用的是基于lib-flexable的REM适配方案，则应该设置为你的设计稿的十分之一。

例如设计稿是750宽，则应该设置为75。

大多数设计稿的原型都是以 iphone6 为原型，iphone6 设备的宽是 750，我们的设计稿也是这样。

但是 Vant 建议设置为 37.5，为什么呢？

因为Vant是基于375写的，所以如果你设置为75的话，Vant的样式就小了一半。

所以如果设置为 37.5 的话，Vant 的样式是没有问题的，但是我们在测量设计稿的时候都必须除2才能使用，否则就会变得很大。

这样做其实也没有问题，但是有没有更好的办法呢？我就想实现测量多少写多少（不用换算）。于是聪明的你就想，可以不可以这样来做？

如果是 Vant 的样式，就把 rootValue 设置为 37.5 来转换

如果是我们的样式，就按照 75 的 rootValue 来转换

通过 查阅文档 我们可以看到 rootValue 支持两种参数类型

数字：固定值

函数：动态计算返回

postcss-pxtorem 处理每个 CSS 文件的时候都会来调用这个函数

它会把被处理的 CSS 文件相关的信息通过参数传递给该函数

修改配置如下

/**

* PostCSS 配置文件

*/

module.exports={

// 配置要使用的 PostCSS 插件

plugins: {

// 配置使用 autoprefixer 插件

// 作用：生成浏览器 CSS 样式规则前缀

// VueCLI 内部已经配置了 autoprefixer 插件

// 所以又配置了一次，所以产生冲突了

// 'autoprefixer': { // autoprefixer 插件的配置

//   // 配置要兼容到的环境信息

//   browsers: ['Android >= 4.0', 'iOS >= 8']

// },

​

// 配置使用 postcss-pxtorem 插件

// 作用：把 px 转为 rem

'postcss-pxtorem': {

rootValue({file}) {

returnfile.indexOf('vant')!==-1?37.5:75

     },

propList: ['*']

   }

  }

}

​

其他

[Android]

>=4.0

​

[iOS]

>=8

​具体语法请 参考这里

5.  配置完毕，把服务重启一下，最后测试，very good

四、移动端，PC端是怎么做适配的？

px：像素

em：一个 M 的宽度（面试：一个字的宽度）

rem：root em 根元素（ <html> ）的 font-size //oppo个别机型不适用

vh：view height，视口高度 100vh === 视口高度

vw：view width，视口宽度 100vw === 视口宽度

浏览器默认 font-size:16px;

Chrome浏览器默认最小字号为12px：font-size:12px;

所以一般情况下，rem 的font-size不要小于12px;

rem 就是 <html> 元素的 font-size，默认为 16px;(浏览器默认font-size)

rem和em 的区别：

1.meta viewport

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

2.媒体查询

更具查询结果选择不同的css样式,设置屏幕最大宽度，如果页面范围在这个宽度内就可以显示对应的CSS，以最大500为例

<style>

@media (max-width: 500px) {

......

}

</style>

3.动态 rem方案

一切单位以屏幕宽度为标准，就能完美还原设计稿。

动态REM思路：动态rem 采用整体缩放的思想，在页面渲染之前，使用JS获取设备宽度并设置rem(1rem == html font-size == viewport width)，之后的布局单位全部使用rem来实现整体缩放。

在使用动态 rem 布局的移动端页面中，很小的宽度如border-width 依然使用px，因为即使使用rem，当rem小于1px 时，依然会被浏览器当做1px 使用。

以上就是关于移动端适配方案阮一峰相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。

推荐阅读：

移动互联网媒体营销（移动互联网媒体营销抖音）

中国移动杭州研发中心官网（中国移动杭州研发中心官网首页）

杭州移动企业上云产品手册（移动企业上云什么意思）

杭州卖旗袍的地方在哪（杭州卖旗袍的地方在哪儿）

海报属于什么设计（海报属于什么设计领域的产品）