一篇文章搞懂，vue中pc端與移動端適配解決方案（親測有效）

ue中pc端與移動端適配解決方案

0. 前言

當(dāng)涉及屏幕適配方案時，我們常常被眾多選擇所困擾，如postcss-pxtorem、postcss-px2rem、px2rem-loader、postcss-plugin-px2rem等。然而，在實際測試中，由于不同的Vue和Webpack版本，很多這些方式已經(jīng)無法使用，反而帶來了更多麻煩。

為了盡快解決問題，我們應(yīng)該始終以解決問題為導(dǎo)向，首先采用那些已經(jīng)獲得驗證并能產(chǎn)生效果的方法。對于上述列舉的方案，雖然沒有一一測試過，但我們需要明確的是，抓住解決問題的關(guān)鍵。

針對移動端和PC端適配，我建議將兩者進(jìn)行拆分并進(jìn)行工程化配置，以避免整體框架調(diào)整后在某些頁面上出現(xiàn)輕微不協(xié)調(diào)。在某些情況下，你可能會注意到筆記本電腦上顯示比例縮放后的細(xì)微差異，這可以通過插入【整體縮放自適應(yīng)解決方案（阿里團(tuán)隊高清方案）的JS代碼】來解決。

1.移動端適配方案

1.1 基礎(chǔ)概念

viewport即視窗、視口，用于顯示網(wǎng)頁部分的區(qū)域，在PC端視口即是瀏覽器窗口區(qū)域，在移動端，為了讓頁面展示更多的內(nèi)容，視窗的寬度默認(rèn)不為設(shè)備的寬度，在移動端視窗有三個概念：布局視窗、視覺視窗、理想視窗。

布局視窗：在瀏覽器窗口css的布局區(qū)域，布局視口的寬度限制css布局的寬。為了能在移動設(shè)備上正常顯示那些為pc端瀏覽器設(shè)計的網(wǎng)站，移動設(shè)備上的瀏覽器都會把自己默認(rèn)的viewport設(shè)為980px或其他值，一般都比移動端瀏覽器可視區(qū)域大很多，所以就有橫向滾動條。
視覺視窗：終端設(shè)備顯示網(wǎng)頁的區(qū)域。
理想視窗：針對當(dāng)前設(shè)備最理想的展示頁面的視窗，不會出現(xiàn)橫向滾動條，頁面剛好全部展現(xiàn)在視窗內(nèi)，理想視窗即終端屏幕的寬度。

viewport詳細(xì)設(shè)置：

通過設(shè)置viewport可以設(shè)置頁面大小，通過meta標(biāo)簽可以設(shè)置viewport信息。
viewport有以下幾個屬性：

width：視口的寬度，正整數(shù)或設(shè)備寬度device-width（width=device-width）
height：視口高度，正整數(shù)或device-height
initial-scale（initial-scale=1.0）：網(wǎng)頁初始縮放值，小數(shù)縮小，反之放大（initial-scale=1.0）
maximum-scale（maximum-scale=1.0）：設(shè)置頁面的最大縮放比例
minimum-scale（minimum-scale=1.0）：設(shè)置頁面的最小縮放比例
user-scaleble（user-scalable=no）：用戶是否可以縮放

移動端默認(rèn)會縮放大尺寸的頁面的，當(dāng)我們把上述代碼去掉之后，就會隨著移動端縮放的比例走，而且還可以自由放大。

1.1.1 解決方案一viewport縮放

方案統(tǒng)計：

設(shè)置viewport進(jìn)行縮放
PC端適配移動端可以通過html標(biāo)簽重meta name="viewport"調(diào)整視口比例，進(jìn)行頁面縮放。不過有部分同學(xué)使用過程中反應(yīng)縮放會導(dǎo)致有些頁面元素會糊的情況。

代碼原理：

根據(jù)設(shè)備屏幕的DPR（設(shè)備像素比，比如dpr=2時，表示1個CSS像素由2X2個物理像素點組成）動態(tài)設(shè)置 html 的font-size
同時根據(jù)設(shè)備DPR調(diào)整頁面的縮放值，進(jìn)而達(dá)到高清效果。

//  僅在移動端時候生效，或者瀏覽器手機(jī)模式
//  整體縮放自適應(yīng)解決方案（阿里團(tuán)隊高清方案） 淘寶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);

//  高清方案默認(rèn)1rem=100px,那么 btn的寬度就設(shè)置為:)
.btn {
    width:0.8rem
    height:1.2rem
}

根據(jù)設(shè)備屏幕的DPR,自動設(shè)置最合適的高清縮放。保證了不同設(shè)備下視覺體驗的一致性。舊方案，屏幕越大，元素也越大，新方案，屏幕越大，看到的越多看得越多的理解：比如，一篇很長的文章在ip4上，一屏盛不了那么多內(nèi)容，而在ip6plus上，可以全部看清楚，這是因為，新方案會根據(jù)dpr來縮放視口，大屏小屏的手機(jī)上，顯示的字體大小都是一致的，當(dāng)然在大屏上看到的東西就多咯～
有效解決移動端真實1px問題（這里的1px 是設(shè)備屏幕上的物理像素）

【7】移動端開發(fā)自適應(yīng)解決方案（阿里團(tuán)隊高清方案）

1.1.2 解決方案二—兩套頁面

同時兼任pc和移動適配

通過配置兩套不同路由和判斷是否是移動端實現(xiàn)

核心代碼：router.addRoute(isMobile() ? mobileRoutes[1] : pcRoutes[1])；（區(qū)分路由）

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單位增長的十進(jìn)制數(shù)字
                    replace:true, //替換包含rems的規(guī)則，而不添加后備
                    mediaQuery:false, //允許在媒體查詢中轉(zhuǎn)換px
                    minPixelValue:0, //設(shè)置要替換的最小像素值
                    selectorBlackList:[], //忽略轉(zhuǎn)換正則匹配項
                    propList:['*'], //可以從px轉(zhuǎn)換為rem的屬性，匹配正則
                    exclude:/node_modules/i  要忽略并保留為px的文件路徑
                }),
            ]
        }
    }
}

2.PC端適配方案

vue項目使用element-ui框架Rem適配（postcss-pxtorem、amfe-flexible），自動轉(zhuǎn)換px為rem，解決響應(yīng)式問題

1366 * 768 ：普通液晶顯示器 1920 * 1080：高清液晶顯示器 2560 * 1440： 2K高清顯示器 4096 * 2160： 4K高清顯示器 1280 * 720：筆記本（1920*1080分辨率下系統(tǒng)默認(rèn)推薦150%縮放比產(chǎn)生的尺寸）

大屏數(shù)據(jù)可視化項目通常用于放在電視或廣告屏上展示用，而不允許出現(xiàn)滾動條

2.1. 適配痛點難點

設(shè)計稿按照1920*1080的分辨率，16:9的比例設(shè)計，實際開發(fā)中，document窗口不足16:9（高度減掉頂部tab及導(dǎo)航欄，地址欄等）不同分辨率：實際應(yīng)用場景中，顯示場景不同，不能固定寫死px單位不同比例：不同的顯示器寬高比與設(shè)計稿不一致

2.2. 什么是rem

rem是CSS3新增的相對長度單位，是指相對于根元素html的font-size計算值的大小。簡單可理解為屏幕寬度的百分比。但是，項目中常見尺寸繪制采用的均是px，要改用rem一時半會緩不過來，而且可能還要換算轉(zhuǎn)換，所以使用rem還是比較麻煩的，但是，我們可以通過插件，能夠?qū)㈨椖恐械膒x轉(zhuǎn)換為rem，還可以自定義基數(shù)。

2.3. 安裝依賴

npm install amfe-flexible // CSS單位自適應(yīng)轉(zhuǎn)換插件 負(fù)責(zé)更改根font-size
npm install postcss-pxtorem@^5.1.1 // 如果版本過高可以降版本下載5.1.1版本 負(fù)責(zé)將px轉(zhuǎn)成rem

// 用途：echarts字體適配
/**
 * echarts字體自適應(yīng)
 * @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 這個過渡方案已經(jīng)可以放棄使用，不管是現(xiàn)在的版本還是以前的版本，都存有一定的問題。建議大家開始使用 viewport 來替代此方。（待考證？）

amfe-flexible是lib-flexible的升級版

flexible就是根據(jù)不同的屏幕算出html的font-size，通過js來動態(tài)寫meta標(biāo)簽

實上他做了這幾樣事情：

動態(tài)改寫<meta>標(biāo)簽
給<html>元素添加data-dpr屬性，并且動態(tài)改寫data-dpr的值
給<html>元素添加font-size屬性，并且動態(tài)改寫font-size的值

在main.js中引入amfe-flexible

import "amfe-flexible"

amfe-flexible 等價代碼

// import '@/utils/rem.js'
?
// 在utils文件夾下創(chuàng)建rem.js
// 設(shè)置 rem 函數(shù)
function setRem() {
    // 1920 默認(rèn)大小16px; 1920px = 120rem ;每個元素px基礎(chǔ)上/16
    const screenWidth = 1920
    const scale = screenWidth / 16
    const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
    // 得到html的Dom元素
    const htmlDom = document.getElementsByTagName('html')[0]
    // 設(shè)置根元素字體大小
    htmlDom.style.fontSize = htmlWidth / scale + 'px'
  }
  // 初始化
  setRem()
  // 改變窗口大小時重新設(shè)置 rem
  window.onresize = function() {
    setRem()
  }

2.4. 配置vue.config.js

配置postcss-pxtorem ,可在vue.config.js、postcsssrc.js、postcss.config.js、其中之一配置，權(quán)重從左到右降低，沒有則新建文件，只需要設(shè)置其中一個即可.

/***
注意點：
（1）rootValue根據(jù)設(shè)計稿寬度除以10進(jìn)行設(shè)置，這邊假設(shè)設(shè)計稿為1920，即rootValue設(shè)為192；
（2）propList是設(shè)置需要轉(zhuǎn)換的屬性，這邊*為所有都進(jìn)行轉(zhuǎn)換。
***/
module.exports=function(){
    devServer:{
        port:3000,
        open:true
    },
    //rem配置
    css: {
        loaderOptions: {
         postcss: {
            plugins: [
              require('postcss-pxtorem')({
                  rootValue: 192, //根元素字體大小
                  propList: ['*'], //可以從px轉(zhuǎn)換為rem的屬性，匹配正則
                  // unitPrecision:5, //允許rem單位增長的十進(jìn)制數(shù)字
                  // replace:true, //替換包含rems的規(guī)則，而不添加后備
                  // mediaQuery:false, //允許在媒體查詢中轉(zhuǎn)換px
                  // minPixelValue:0, //設(shè)置要替換的最小像素值
                  // selectorBlackList:[], //忽略轉(zhuǎn)換正則匹配項
                  // exclude:/node_modules/i  要忽略并保留為px的文件路徑
              })
            ]
         }
       }
    },
}

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

2.5. 總結(jié)

2.5.1 注意事項：

1. 不能使用行內(nèi)樣式

對于行內(nèi)樣式，阿里手淘并不能將px轉(zhuǎn)rem，所以對于需要自適應(yīng)的樣式，如font-size、width、height等請不要寫在行內(nèi)。同理，對于不需要轉(zhuǎn)化的樣式可以寫在行內(nèi)，或者使用PX（大寫）作為單位。

暫未找到可以轉(zhuǎn)行內(nèi)rem的插件，可根據(jù)下面地址的方式自己實現(xiàn)（未驗證是否可行）。blog.csdn.net/weixin_3961…

2. 字號不使用rem

我們都知道chrome的最小顯示的字體是12px，如果字體用rem，計算出來小于12px，那么就也會以12px顯示，而且我們不希望出現(xiàn)13px或者15px這樣的奇葩尺寸，所以字體最好是用PX（大寫）來表示，至于適應(yīng)，我們可以寫媒體查詢。

.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端響應(yīng)式媒體斷點：
?
```css
   @media (min-width: 1024px){
    body{font-size: 18px}
   } /*>=1024的設(shè)備*/
?
   @media (min-width: 1100px) {
    body{font-size: 20px}
   } /*>=1100的設(shè)備*/
   @media (min-width: 1280px) {
    body{font-size: 22px;}
   } /*>=1280的設(shè)備*/
?
   @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

問題：屏幕縮小，網(wǎng)頁縮放，效果與原1920*1080不一致

//  僅在移動端時候生效，或者瀏覽器手機(jī)模式
//  整體縮放自適應(yīng)解決方案（阿里團(tuán)隊高清方案）
! 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預(yù)處理器，如果是sass改成node-sass；我這邊使用的版本為：

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

大屏改進(jìn)方案：
限制rem的最大值
通過媒體查詢，限制內(nèi)容最大寬度

作者：幸運_
鏈接：https://juejin.cn/post/7278646930174165050

前端開發(fā)中，移動端不同設(shè)備的屏幕適配一直是個繞不開的技術(shù)話題。目前比較流行的方案是類似淘寶的flexible。其原理是使用js動態(tài)計算html的font-size，利用rem來實現(xiàn)不同寬度的適配。使用js方案雖然比較成熟，但也有它的一些缺點，比如性能損耗，由于js的阻塞加載和動態(tài)計算，頁面不免會出現(xiàn)卡頓和閃屏的現(xiàn)象，影響用戶體驗。今天我們不使用js，完全使用css來實現(xiàn)適配，來看看是怎么實現(xiàn)的吧！

移動端屏幕適配

方案一：使用meta標(biāo)簽

在html的head中插入下面的meta標(biāo)簽：

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

沒錯，是兩個viewport標(biāo)簽。width=device-width寫在上面，width=375寫在下面，375就是以哪個設(shè)備寬度為基準(zhǔn)，現(xiàn)在大部分設(shè)計稿都是以iphone6的375寬度為基準(zhǔn)做2倍圖。加了上面兩個mata標(biāo)簽，后面的css就可以完全使用px為單位直接使用，整個頁面會自動按設(shè)備寬度進(jìn)行等比例縮放。看下面的演示效果：

方案二：使用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單位轉(zhuǎn)換，建議大家可以使用px2rem這個插件完成，webpack、vscode都能支持。設(shè)置時將rootFontSize 設(shè)為100即可。

設(shè)置px2rem參數(shù)

在vscode中，可以使用ctrl+shift+p,選擇px2rem就可以將當(dāng)前頁面的px全部轉(zhuǎn)換為rem。

px2rem在vscode中的使用方法

當(dāng)然，rem和px可以相互共存，比如我標(biāo)題欄就想要44px高，這樣就不會縮放了。看下面的演示效果：

純css實現(xiàn)移動端適配

總結(jié)：兩種方案如何選擇

方案一，直接使用html的mata實現(xiàn)整個頁面的縮放，比較適合那些宣傳單頁或全屏游戲交互類，無法實現(xiàn)px與rem共存的情況。

方案二，利用了rem來縮放，可實現(xiàn)與px共存，在借助px2rem的情況下，能高效方便的實現(xiàn)適配。

綜合考慮，小編建議使用方案二。你，學(xué)會了嗎？

錄：

1、手機(jī)瀏覽器分辨率

2、移動端和pc端網(wǎng)站需要分開嗎

3、dpr和多倍圖

4、常見移動端適配方式

5、大廠手機(jī)瀏覽器適配方式

前端開發(fā)人員需不需要學(xué)習(xí)移動端適配：在全球范圍內(nèi)，2020 年所有網(wǎng)站訪問的68.1%來自移動設(shè)備，比 2019 年的 63.3% 有所增加。臺式機(jī)帶來了 28.9% 的訪問量，而 3.1% 的訪問者來自平板電腦。

2021年全球網(wǎng)站訪問來自移動設(shè)備勢必會突破70%，所以網(wǎng)頁的移動端適配知識是現(xiàn)在前端開發(fā)人員的必修課。下面我們就移動端適配需要了解哪些知識，一起回顧和討論一下。

1、手機(jī)的分辨率和手機(jī)瀏覽器的分辨率

首先我們得清楚，手機(jī)的分辨率和手機(jī)瀏覽器分辨率不是一個東西。

一般來說，我們使用的手機(jī)的分辨率遠(yuǎn)大于手機(jī)瀏覽器的分辨率。因為手機(jī)分辨率大會讓手機(jī)顯示的內(nèi)容更細(xì)膩，比如消除圖片的顆粒感；而手機(jī)瀏覽器分辨率小則是為了讓用戶對某些內(nèi)容更好辨認(rèn)，比如更大的文字，同時，這樣的設(shè)計也可以讓手機(jī)瀏覽器展示一些為pc端設(shè)計的網(wǎng)頁而不至于由于文字太小無法辨認(rèn)，或者排版擠成一團(tuán)看不清楚。

從下邊幾張圖，可以很清楚的看見手機(jī)分辨率和手機(jī)瀏覽器分辨率的大小和倍數(shù)關(guān)系：（手機(jī)瀏覽器的大小也叫視口大小-viewport）

可以看到現(xiàn)在的旗艦手機(jī)的像素比dpr(device pixel ratio)已經(jīng)達(dá)到了3和4，這對我們前端開發(fā)人員選擇圖片的大小提出了新的要求，后邊我們會提到多倍圖。

還有就是視口寬度，我們根據(jù)查詢現(xiàn)有的大部分手機(jī)型號，看到目前的手機(jī)視口寬度最小是320px，最大是428px，所以我們一般在媒體查詢時，把視口寬度小于540的設(shè)備歸為手機(jī)設(shè)備。

這里提到的視口大小viewport是比較重要的知識點，移動端網(wǎng)站的開發(fā)中尤為重要。我們在這幾個地方都會用到它。

mate標(biāo)簽中

width=device-width這句話的意思是讓當(dāng)前viewport的寬度等于設(shè)備的寬度。如果不這樣設(shè)置的話，當(dāng)前viewport默認(rèn)是980px，是超出一般手機(jī)視口大小的。對這個部分存疑的同學(xué)可以看一下ppk的3個viewport的解讀。 initial-scale=1.0這句話是說縮放比等于1，也就是不允許手動縮放。

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

在CSS3響應(yīng)式頁面設(shè)計中的媒體查詢

根據(jù)不同的屏幕viewport尺寸來設(shè)置不同的css樣式。

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

viewport的css單位vw和vh

現(xiàn)在主流的手機(jī)瀏覽器都支持這個新的單位，使用起來簡直太方便了。1vw就等于視口寬度的1%，1vh就等于視口高度的1%。

.title {
    font-size: 5vw;
}

2、移動端和pc端網(wǎng)站需要分開嗎

如果移動端網(wǎng)站和pc端網(wǎng)站需要的結(jié)構(gòu)基本差不多，頁面邏輯沒有那么復(fù)雜，那么移動端和pc端可以用一套網(wǎng)站，使用媒體查詢可以針對手機(jī)，平板和pc三種尺寸設(shè)置三種版式，根據(jù)查詢到的設(shè)備屏幕尺寸進(jìn)行不同的樣式展示，以達(dá)到三種設(shè)備一套代碼的目的。這種響應(yīng)式的網(wǎng)站可以參考三星和耐克的官網(wǎng)首頁。

而如果網(wǎng)站的移動端和pc端內(nèi)容差距較大，頁面邏輯復(fù)雜，則需要單獨給移動端編寫頁面，如果你在手機(jī)瀏覽器輸入xxxx.com會看到網(wǎng)址自動跳轉(zhuǎn)到m.xxxx.com，這個就是單獨針對手機(jī)端而做的網(wǎng)站。大型網(wǎng)站都是這種pc和移動分離的形式，比如京東、淘寶等。

3、dpr和多倍圖

前邊我們說過，手機(jī)的物理分辨率都比瀏覽器分辨率高，兩者的比值叫做dpr（device pixel ratio），這個比值可以通過window.devicePixelRatio查看，當(dāng)dpr=2 的時候，就意味了手機(jī)花了4個物理像素點來展示1個css像素點，所以看起來會更清晰。

文字和邊框由于是矢量的，所以可以被顯示更清晰，而圖片如果還按照css的像素大小來要求，就會顯得很模糊，于是，我們需要用二倍圖、三杯圖甚至是多倍圖用來在dpr大于2的移動端顯示。

比如我們在css上需要展示一張50x50的圖片，如果手機(jī)的dpr是2，那么就需要一張100x100的圖片。這樣才可以充分利用手機(jī)的物理像素，消除模糊的感覺。

4、常見的移動端適配方式

mate標(biāo)簽：name="viewport" content="width=device-width,initial-scale=1.0"
寬度百分比：寬度百分比，避免出現(xiàn)寬度溢出出現(xiàn)橫向滾動條
rem：用rem單位來設(shè)置文字和文字周邊距離，使用同一個可修改的單位，實現(xiàn)了只修改一個數(shù)值就可以修改多處單位的目的
vw/vh：1vw等于視口寬度的1%，1vh等于視口高度的1%。viewport單位自然而然的根據(jù)視口大小來改變單位的值。
媒體查詢：使用@media查詢當(dāng)前視口大小，進(jìn)而來區(qū)分樣式
flex布局：使用css3的flex彈性布局
display-fixed：相對視口固定
頁面縮放：設(shè)置viewport的width，js動態(tài)改變initial-scale使頁面等比縮放。
flexible：淘寶的移動端方案。

5、大廠的移動適配方案

京東：

body設(shè)置了最小寬度是320，最大寬度是540，body高度不是固定的；

在布局上寬度多數(shù)都是用的百分比；

垂直方向的高度，根據(jù)元素內(nèi)容分別使用了px，rem，vw/vh這幾個單位；

文字大小和周圍距離用的是rem單位；圖片基本是二倍圖；導(dǎo)航是用fixed固定。

淘寶：

body設(shè)置了固定的100%高度和100%寬度；

在內(nèi)容的布局上多是使用flex彈性布局來完成的；

圖片接近三倍圖；

基于淘寶的flexible，內(nèi)容的寬高、文字、間距等，都是使用px為單位，lib-flexible會根據(jù)視口大小動態(tài)改變mate標(biāo)簽、data-dpr、font-size等屬性的值，從而控制頁面在不同的移動設(shè)備上都有良好的表現(xiàn)；

b站：

b站的頁面寬度同樣是百分比；

布局上使用了flex彈性布局；圖片接近三倍圖；

比較的不同的是b站的內(nèi)容、文字、間距等大量使用了vw/vh單位，這也是目前比較提倡的移動端使用的單位。

在線咨詢

上一篇：為用戶和開發(fā)人員改進(jìn) HTML 圖像的 6 個步驟
下一篇：四種解決Nginx出現(xiàn)403 forbidden 報錯的方法

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

一篇文章搞懂，vue中pc端與移動端適配解決方案（親測有效）

ue中pc端與移動端適配解決方案

0. 前言

1.移動端適配方案

1.1 基礎(chǔ)概念

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. 總結(jié)

2.5.1 注意事項：

1. 不能使用行內(nèi)樣式

2. 字號不使用rem

2.5.2 測試反饋：

2.5.3其他問題：

方案一：使用meta標(biāo)簽

方案二：使用css的calc計算屬性

總結(jié)：兩種方案如何選擇

1、手機(jī)的分辨率和手機(jī)瀏覽器的分辨率

2、移動端和pc端網(wǎng)站需要分開嗎

3、dpr和多倍圖

4、常見的移動端適配方式

5、大廠的移動適配方案

您的項目需求