一篇文章搞懂，vue中pc端与移动端适配解决方案（亲测有效）

ue中pc端与移动端适配解决方案

0. 前言

当涉及屏幕适配方案时，我们常常被众多选择所困扰，如postcss-pxtorem、postcss-px2rem、px2rem-loader、postcss-plugin-px2rem等。然而，在实际测试中，由于不同的Vue和Webpack版本，很多这些方式已经无法使用，反而带来了更多麻烦。

为了尽快解决问题，我们应该始终以解决问题为导向，首先采用那些已经获得验证并能产生效果的方法。对于上述列举的方案，虽然没有一一测试过，但我们需要明确的是，抓住解决问题的关键。

针对移动端和PC端适配，我建议将两者进行拆分并进行工程化配置，以避免整体框架调整后在某些页面上出现轻微不协调。在某些情况下，你可能会注意到笔记本电脑上显示比例缩放后的细微差异，这可以通过插入【整体缩放自适应解决方案（阿里团队高清方案）的JS代码】来解决。

1.移动端适配方案

1.1 基础概念

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

布局视窗：在浏览器窗口css的布局区域，布局视口的宽度限制css布局的宽。为了能在移动设备上正常显示那些为pc端浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或其他值，一般都比移动端浏览器可视区域大很多，所以就有横向滚动条。
视觉视窗：终端设备显示网页的区域。
理想视窗：针对当前设备最理想的展示页面的视窗，不会出现横向滚动条，页面刚好全部展现在视窗内，理想视窗即终端屏幕的宽度。

viewport详细设置：

通过设置viewport可以设置页面大小，通过meta标签可以设置viewport信息。
viewport有以下几个属性：

width：视口的宽度，正整数或设备宽度device-width（width=device-width）
height：视口高度，正整数或device-height
initial-scale（initial-scale=1.0）：网页初始缩放值，小数缩小，反之放大（initial-scale=1.0）
maximum-scale（maximum-scale=1.0）：设置页面的最大缩放比例
minimum-scale（minimum-scale=1.0）：设置页面的最小缩放比例
user-scaleble（user-scalable=no）：用户是否可以缩放

移动端默认会缩放大尺寸的页面的，当我们把上述代码去掉之后，就会随着移动端缩放的比例走，而且还可以自由放大。

1.1.1 解决方案一viewport缩放

方案统计：

设置viewport进行缩放
PC端适配移动端可以通过html标签重meta name="viewport"调整视口比例，进行页面缩放。不过有部分同学使用过程中反应缩放会导致有些页面元素会糊的情况。

代码原理：

根据设备屏幕的DPR（设备像素比，比如dpr=2时，表示1个CSS像素由2X2个物理像素点组成）动态设置 html 的font-size
同时根据设备DPR调整页面的缩放值，进而达到高清效果。

//  仅在移动端时候生效，或者浏览器手机模式
//  整体缩放自适应解决方案（阿里团队高清方案） 淘宝m端使用的解决方案
! function (e) {
    function t(a) {
      if (i[a]) return i[a].exports;
      var n = i[a] = {
        exports: {},
        id: a,
        loaded: !1
      };
      return e[a].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports
    }
    var i = {};
    return t.m = e, t.c = i, t.p = "", t(0)
  }([function (e, t) {
    "use strict";
    Object.defineProperty(t, "__esModule", {
      value: !0
    });
    var i = window;
    t["default"] = i.flex = function (e, t) {
      var a = e || 100,
        n = t || 1,
        r = i.document,
        o = navigator.userAgent,
        d = o.match(/Android[\S\s]+AppleWebkit/(\d{3})/i),
        l = o.match(/U3/((\d+|.){5,})/i),
        c = l && parseInt(l[1].split(".").join(""), 10) >= 80,
        p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi),
        s = i.devicePixelRatio || 1;
      p || d && d[1] > 534 || c || (s = 1);
      var u = 1 / s,
        m = r.querySelector('meta[name="viewport"]');
      m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m
        .setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" +
          u + ",minimum-scale=" + u), r.documentElement.style.fontSize = a / 2 * s * n + "px"
    }, e.exports = t["default"]
  }]);
  flex(100, 1);

//  高清方案默认1rem=100px,那么 btn的宽度就设置为:)
.btn {
    width:0.8rem
    height:1.2rem
}

根据设备屏幕的DPR,自动设置最合适的高清缩放。保证了不同设备下视觉体验的一致性。旧方案，屏幕越大，元素也越大，新方案，屏幕越大，看到的越多看得越多的理解：比如，一篇很长的文章在ip4上，一屏盛不了那么多内容，而在ip6plus上，可以全部看清楚，这是因为，新方案会根据dpr来缩放视口，大屏小屏的手机上，显示的字体大小都是一致的，当然在大屏上看到的东西就多咯～
有效解决移动端真实1px问题（这里的1px 是设备屏幕上的物理像素）

【7】移动端开发自适应解决方案（阿里团队高清方案）

1.1.2 解决方案二—两套页面

同时兼任pc和移动适配

通过配置两套不同路由和判断是否是移动端实现

核心代码：router.addRoute(isMobile() ? mobileRoutes[1] : pcRoutes[1])；（区分路由）

1.1.3 解决方案三—postcss-pxtorem、amfe-flexible

搭配工程化，可以参考第二章【PC端适配方案】

npm i postcss-pxtorem --save-dev

//使用postcss-pxtorem
module.exports = {
    lintOnSave:true,
    css:{
        loaderOptions:{
            postcss:[
                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的文件路径
                }),
            ]
        }
    }
}

2.PC端适配方案

vue项目使用element-ui框架Rem适配（postcss-pxtorem、amfe-flexible），自动转换px为rem，解决响应式问题

1366 * 768 ：普通液晶显示器 1920 * 1080：高清液晶显示器 2560 * 1440： 2K高清显示器 4096 * 2160： 4K高清显示器 1280 * 720：笔记本（1920*1080分辨率下系统默认推荐150%缩放比产生的尺寸）

大屏数据可视化项目通常用于放在电视或广告屏上展示用，而不允许出现滚动条

2.1. 适配痛点难点

设计稿按照1920*1080的分辨率，16:9的比例设计，实际开发中，document窗口不足16:9（高度减掉顶部tab及导航栏，地址栏等）不同分辨率：实际应用场景中，显示场景不同，不能固定写死px单位不同比例：不同的显示器宽高比与设计稿不一致

2.2. 什么是rem

rem是CSS3新增的相对长度单位，是指相对于根元素html的font-size计算值的大小。简单可理解为屏幕宽度的百分比。但是，项目中常见尺寸绘制采用的均是px，要改用rem一时半会缓不过来，而且可能还要换算转换，所以使用rem还是比较麻烦的，但是，我们可以通过插件，能够将项目中的px转换为rem，还可以自定义基数。

2.3. 安装依赖

npm install amfe-flexible // CSS单位自适应转换插件 负责更改根font-size
npm install postcss-pxtorem@^5.1.1 // 如果版本过高可以降版本下载5.1.1版本 负责将px转成rem

// 用途：echarts字体适配
/**
 * echarts字体自适应
 * @param {*} font 字号大小
 */
export function echartGetFontSize(font) {
    let docEl = document.documentElement,
      clientWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
    if (!clientWidth) return;
    let fontSize = clientWidth / 1920;
    return font * fontSize;
}

2.3. 引入amfe-flexible

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

amfe-flexible是lib-flexible的升级版

flexible就是根据不同的屏幕算出html的font-size，通过js来动态写meta标签

实上他做了这几样事情：

动态改写<meta>标签
给<html>元素添加data-dpr属性，并且动态改写data-dpr的值
给<html>元素添加font-size属性，并且动态改写font-size的值

在main.js中引入amfe-flexible

import "amfe-flexible"

amfe-flexible 等价代码

// import '@/utils/rem.js'

// 在utils文件夹下创建rem.js
// 设置 rem 函数
function setRem() {
    // 1920 默认大小16px; 1920px = 120rem ;每个元素px基础上/16
    const screenWidth = 1920
    const scale = screenWidth / 16
    const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
    // 得到html的Dom元素
    const htmlDom = document.getElementsByTagName('html')[0]
    // 设置根元素字体大小
    htmlDom.style.fontSize = htmlWidth / scale + 'px'
  }
  // 初始化
  setRem()
  // 改变窗口大小时重新设置 rem
  window.onresize = function() {
    setRem()
  }

2.4. 配置vue.config.js

配置postcss-pxtorem ,可在vue.config.js、postcsssrc.js、postcss.config.js、其中之一配置，权重从左到右降低，没有则新建文件，只需要设置其中一个即可.

/***
注意点：
（1）rootValue根据设计稿宽度除以10进行设置，这边假设设计稿为1920，即rootValue设为192；
（2）propList是设置需要转换的属性，这边*为所有都进行转换。
***/
module.exports=function(){
    devServer:{
        port:3000,
        open:true
    },
    //rem配置
    css: {
        loaderOptions: {
         postcss: {
            plugins: [
              require('postcss-pxtorem')({
                  rootValue: 192, //根元素字体大小
                  propList: ['*'], //可以从px转换为rem的属性，匹配正则
                  // unitPrecision:5, //允许rem单位增长的十进制数字
                  // replace:true, //替换包含rems的规则，而不添加后备
                  // mediaQuery:false, //允许在媒体查询中转换px
                  // minPixelValue:0, //设置要替换的最小像素值
                  // selectorBlackList:[], //忽略转换正则匹配项
                  // exclude:/node_modules/i  要忽略并保留为px的文件路径
              })
            ]
         }
       }
    },
}

// 效果展示 在html上增加根font-size
<html lang="en” style="font-size: 192px;class="light-themes">

2.5. 总结

2.5.1 注意事项：

1. 不能使用行内样式

对于行内样式，阿里手淘并不能将px转rem，所以对于需要自适应的样式，如font-size、width、height等请不要写在行内。同理，对于不需要转化的样式可以写在行内，或者使用PX（大写）作为单位。

暂未找到可以转行内rem的插件，可根据下面地址的方式自己实现（未验证是否可行）。blog.csdn.net/weixin_3961…

2. 字号不使用rem

我们都知道chrome的最小显示的字体是12px，如果字体用rem，计算出来小于12px，那么就也会以12px显示，而且我们不希望出现13px或者15px这样的奇葩尺寸，所以字体最好是用PX（大写）来表示，至于适应，我们可以写媒体查询。

.item {
    border-bottom: 1PX #8d8d8d dashed;
    font-size: 12PX;
    line-height: 16PX;
    @media screen and (min-width: 576PX) {
        font-size: 14PX;
        line-height: 18PX;
    }
    @media screen and (min-width: 768PX) {
        font-size: 16PX;
        line-height: 28PX;
    }
    @media screen and (min-width: 992PX) {
        font-size: 16PX;
        line-height: 32PX;
    }
    @media screen and (min-width: 1200PX) {
        font-size: 18PX;
        line-height: 64PX;
    }
}

PC端响应式媒体断点：

```css
   @media (min-width: 1024px){
    body{font-size: 18px}
   } /*>=1024的设备*/

   @media (min-width: 1100px) {
    body{font-size: 20px}
   } /*>=1100的设备*/
   @media (min-width: 1280px) {
    body{font-size: 22px;}
   } /*>=1280的设备*/

   @media (min-width: 1366px) {
    body{font-size: 24px;}
   }  

   @media (min-width: 1440px) {
     body{font-size: 25px !important;}
   } 

   @media (min-width: 1680px) {
    body{font-size: 28px;}
   } 
   @media (min-width: 1920px) {
    body{font-size: 33px;}
   } 
```

2.5.2 测试反馈：

已测试屏幕尺寸：1920*1080 、1366 * 768

问题：屏幕缩小，网页缩放，效果与原1920*1080不一致

//  仅在移动端时候生效，或者浏览器手机模式
//  整体缩放自适应解决方案（阿里团队高清方案）
! function (e) {
    function t(a) {
      if (i[a]) return i[a].exports;
      var n = i[a] = {
        exports: {},
        id: a,
        loaded: !1
      };
      return e[a].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports
    }
    var i = {};
    return t.m = e, t.c = i, t.p = "", t(0)
  }([function (e, t) {
    "use strict";
    Object.defineProperty(t, "__esModule", {
      value: !0
    });
    var i = window;
    t["default"] = i.flex = function (e, t) {
      var a = e || 100,
        n = t || 1,
        r = i.document,
        o = navigator.userAgent,
        d = o.match(/Android[\S\s]+AppleWebkit/(\d{3})/i),
        l = o.match(/U3/((\d+|.){5,})/i),
        c = l && parseInt(l[1].split(".").join(""), 10) >= 80,
        p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi),
        s = i.devicePixelRatio || 1;
      p || d && d[1] > 534 || c || (s = 1);
      var u = 1 / s,
        m = r.querySelector('meta[name="viewport"]');
      m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m
        .setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" +
          u + ",minimum-scale=" + u), r.documentElement.style.fontSize = a / 2 * s * n + "px"
    }, e.exports = t["default"]
  }]);
  flex(100, 1);

2.5.3其他问题：

如果没效果，查看根元素是否添加上了fongt-size，为添加的话查看css预处理器，如果是sass改成node-sass；我这边使用的版本为：

“node-sass”: “^4.9.0”,
“sass-loader”: “^7.1.0”

大屏改进方案：
限制rem的最大值
通过媒体查询，限制内容最大宽度

作者：幸运_
链接：https://juejin.cn/post/7278646930174165050

前端开发中，移动端不同设备的屏幕适配一直是个绕不开的技术话题。目前比较流行的方案是类似淘宝的flexible。其原理是使用js动态计算html的font-size，利用rem来实现不同宽度的适配。使用js方案虽然比较成熟，但也有它的一些缺点，比如性能损耗，由于js的阻塞加载和动态计算，页面不免会出现卡顿和闪屏的现象，影响用户体验。今天我们不使用js，完全使用css来实现适配，来看看是怎么实现的吧！

移动端屏幕适配

方案一：使用meta标签

在html的head中插入下面的meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=375, user-scalable=no">

没错，是两个viewport标签。width=device-width写在上面，width=375写在下面，375就是以哪个设备宽度为基准，现在大部分设计稿都是以iphone6的375宽度为基准做2倍图。加了上面两个mata标签，后面的css就可以完全使用px为单位直接使用，整个页面会自动按设备宽度进行等比例缩放。看下面的演示效果：

方案二：使用css的calc计算属性

在css中定义html的font-size为：calc(100vw/3.75)，calc、vw能兼容ios8+和android4.4+，可放心使用，如下：

html {
  font-size: calc(100vw/3.75);
  -webkit-text-size-adjust: 100%;
}

然后在css中，就可以将所有的px单位除以100，得到rem单位了。比如：

.row>div {
  float: left;
  width: .82rem;
  height: .82rem;
  text-align: center;
  line-height: .82rem;
  margin-left: .05rem;
  background-color: #f0f0f0;
}

上面的rem单位转换，建议大家可以使用px2rem这个插件完成，webpack、vscode都能支持。设置时将rootFontSize 设为100即可。

设置px2rem参数

在vscode中，可以使用ctrl+shift+p,选择px2rem就可以将当前页面的px全部转换为rem。

px2rem在vscode中的使用方法

当然，rem和px可以相互共存，比如我标题栏就想要44px高，这样就不会缩放了。看下面的演示效果：

纯css实现移动端适配

总结：两种方案如何选择

方案一，直接使用html的mata实现整个页面的缩放，比较适合那些宣传单页或全屏游戏交互类，无法实现px与rem共存的情况。

方案二，利用了rem来缩放，可实现与px共存，在借助px2rem的情况下，能高效方便的实现适配。

综合考虑，小编建议使用方案二。你，学会了吗？

录：

1、手机浏览器分辨率

2、移动端和pc端网站需要分开吗

3、dpr和多倍图

4、常见移动端适配方式

5、大厂手机浏览器适配方式

前端开发人员需不需要学习移动端适配：在全球范围内，2020 年所有网站访问的68.1%来自移动设备，比 2019 年的 63.3% 有所增加。台式机带来了 28.9% 的访问量，而 3.1% 的访问者来自平板电脑。

2021年全球网站访问来自移动设备势必会突破70%，所以网页的移动端适配知识是现在前端开发人员的必修课。下面我们就移动端适配需要了解哪些知识，一起回顾和讨论一下。

1、手机的分辨率和手机浏览器的分辨率

首先我们得清楚，手机的分辨率和手机浏览器分辨率不是一个东西。

一般来说，我们使用的手机的分辨率远大于手机浏览器的分辨率。因为手机分辨率大会让手机显示的内容更细腻，比如消除图片的颗粒感；而手机浏览器分辨率小则是为了让用户对某些内容更好辨认，比如更大的文字，同时，这样的设计也可以让手机浏览器展示一些为pc端设计的网页而不至于由于文字太小无法辨认，或者排版挤成一团看不清楚。

从下边几张图，可以很清楚的看见手机分辨率和手机浏览器分辨率的大小和倍数关系：（手机浏览器的大小也叫视口大小-viewport）

可以看到现在的旗舰手机的像素比dpr(device pixel ratio)已经达到了3和4，这对我们前端开发人员选择图片的大小提出了新的要求，后边我们会提到多倍图。

还有就是视口宽度，我们根据查询现有的大部分手机型号，看到目前的手机视口宽度最小是320px，最大是428px，所以我们一般在媒体查询时，把视口宽度小于540的设备归为手机设备。

这里提到的视口大小viewport是比较重要的知识点，移动端网站的开发中尤为重要。我们在这几个地方都会用到它。

mate标签中

width=device-width这句话的意思是让当前viewport的宽度等于设备的宽度。如果不这样设置的话，当前viewport默认是980px，是超出一般手机视口大小的。对这个部分存疑的同学可以看一下ppk的3个viewport的解读。 initial-scale=1.0这句话是说缩放比等于1，也就是不允许手动缩放。

<meta name="viewport" content="width=device-width,initial-scale=1.0">

在CSS3响应式页面设计中的媒体查询

根据不同的屏幕viewport尺寸来设置不同的css样式。

@media srceen and (min-width:960px)  and  (max-width:1199px){	·······}

viewport的css单位vw和vh

现在主流的手机浏览器都支持这个新的单位，使用起来简直太方便了。1vw就等于视口宽度的1%，1vh就等于视口高度的1%。

.title {
    font-size: 5vw;
}

2、移动端和pc端网站需要分开吗

如果移动端网站和pc端网站需要的结构基本差不多，页面逻辑没有那么复杂，那么移动端和pc端可以用一套网站，使用媒体查询可以针对手机，平板和pc三种尺寸设置三种版式，根据查询到的设备屏幕尺寸进行不同的样式展示，以达到三种设备一套代码的目的。这种响应式的网站可以参考三星和耐克的官网首页。

而如果网站的移动端和pc端内容差距较大，页面逻辑复杂，则需要单独给移动端编写页面，如果你在手机浏览器输入xxxx.com会看到网址自动跳转到m.xxxx.com，这个就是单独针对手机端而做的网站。大型网站都是这种pc和移动分离的形式，比如京东、淘宝等。

3、dpr和多倍图

前边我们说过，手机的物理分辨率都比浏览器分辨率高，两者的比值叫做dpr（device pixel ratio），这个比值可以通过window.devicePixelRatio查看，当dpr=2 的时候，就意味了手机花了4个物理像素点来展示1个css像素点，所以看起来会更清晰。

文字和边框由于是矢量的，所以可以被显示更清晰，而图片如果还按照css的像素大小来要求，就会显得很模糊，于是，我们需要用二倍图、三杯图甚至是多倍图用来在dpr大于2的移动端显示。

比如我们在css上需要展示一张50x50的图片，如果手机的dpr是2，那么就需要一张100x100的图片。这样才可以充分利用手机的物理像素，消除模糊的感觉。

4、常见的移动端适配方式

mate标签：name="viewport" content="width=device-width,initial-scale=1.0"
宽度百分比：宽度百分比，避免出现宽度溢出出现横向滚动条
rem：用rem单位来设置文字和文字周边距离，使用同一个可修改的单位，实现了只修改一个数值就可以修改多处单位的目的
vw/vh：1vw等于视口宽度的1%，1vh等于视口高度的1%。viewport单位自然而然的根据视口大小来改变单位的值。
媒体查询：使用@media查询当前视口大小，进而来区分样式
flex布局：使用css3的flex弹性布局
display-fixed：相对视口固定
页面缩放：设置viewport的width，js动态改变initial-scale使页面等比缩放。
flexible：淘宝的移动端方案。

5、大厂的移动适配方案

京东：

body设置了最小宽度是320，最大宽度是540，body高度不是固定的；

在布局上宽度多数都是用的百分比；

垂直方向的高度，根据元素内容分别使用了px，rem，vw/vh这几个单位；

文字大小和周围距离用的是rem单位；图片基本是二倍图；导航是用fixed固定。

淘宝：

body设置了固定的100%高度和100%宽度；

在内容的布局上多是使用flex弹性布局来完成的；

图片接近三倍图；

基于淘宝的flexible，内容的宽高、文字、间距等，都是使用px为单位，lib-flexible会根据视口大小动态改变mate标签、data-dpr、font-size等属性的值，从而控制页面在不同的移动设备上都有良好的表现；

b站：

b站的页面宽度同样是百分比；

布局上使用了flex弹性布局；图片接近三倍图；

比较的不同的是b站的内容、文字、间距等大量使用了vw/vh单位，这也是目前比较提倡的移动端使用的单位。

在线咨询

上一篇：为用户和开发人员改进 HTML 图像的 6 个步骤
下一篇：四种解决Nginx出现403 forbidden 报错的方法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

一篇文章搞懂，vue中pc端与移动端适配解决方案（亲测有效）

ue中pc端与移动端适配解决方案

0. 前言

1.移动端适配方案

1.1 基础概念

1.1.1 解决方案一viewport缩放

1.1.2 解决方案二—两套页面

1.1.3 解决方案三—postcss-pxtorem、amfe-flexible

2.PC端适配方案

2.1. 适配痛点难点

2.2. 什么是rem

2.3. 安装依赖

2.3. 引入amfe-flexible

2.4. 配置vue.config.js

2.5. 总结

2.5.1 注意事项：

1. 不能使用行内样式

2. 字号不使用rem

2.5.2 测试反馈：

2.5.3其他问题：

方案一：使用meta标签

方案二：使用css的calc计算属性

总结：两种方案如何选择

1、手机的分辨率和手机浏览器的分辨率

2、移动端和pc端网站需要分开吗

3、dpr和多倍图

4、常见的移动端适配方式

5、大厂的移动适配方案

您的项目需求