vue項目實現移動端適配

另外2種自適應方式請閱讀 前端簡單實現移動端，web端自適應的寫法
1，安裝 flexible和 postcss-px2rem（命令行安裝）
npm install lib-flexible --save

npm install postcss-px2rem --save
簡要介紹這兩個包的用途：
例如在Galaxy S III:

例如在iphone6/7/8:

flexible會為頁面根據屏幕自動添加標簽，動態控制initial-scale，maximum-scale，minimum-scale等屬性的值。

postcss-px2rem會將px轉換為rem，rem單位用於適配不同寬度的屏幕，根據標簽的font-size值來計算出結果，1rem=html標簽的font-size值。

2, 引入lib-flexible
在項目入口文件main.js 中引入lib-flexible

import ‘lib-flexible’

注意事項（important）: 由於flexible會動態給頁面header中添加標簽，所以務必請把目錄 public/index.html 中的這個標簽刪除！！！

3, 配置postcss-px2rem
vue-cli3 構建的項目相較於vue-cli2 構建的項目精簡了許多，將一些默認配置進行了更好更嚴密，讓開發變得更高效的封裝。具體請看vue-cli官網 https://cli.vuejs.org/zh/guide/

px2rem的配置放在vue-cli3 項目中vue.config.js中（找不到？可能你是一個新構建的項目，需要手動在項目根目錄創建vue.config.js）

具體配置內容如下：

module.exports = {

    css: {

        loaderOptions: {

            css: {},

            postcss: {

                plugins: [

                    // 補全css前綴(解決兼容性)

                    require("autoprefixer")(),

                    // 把px單位換算成rem單位

                    require("postcss-pxtorem")({

                        rootValue: 37.5, // 換算的基數37.5

                        //  selectorBlackList: [".my-van", 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'], // 要忽略的選擇器並保留為px。

                        propList: ["*"], //可以從px更改為rem的屬性。

                        minPixelValue: 2 // 設置要替換的最小像素值。

                    })

                ]

            }

        }

    }

};

OK，重啟項目，兩個用於移動端適配的包就這樣可以愉快的開始使用了！！！

下面來看我們的代碼，代碼中我們直接用px來寫寬高：

1 .testclass {
2 width: 300px;
3 height: 200px;
4 background: #e3e3e3;
5 }
在瀏覽器中會是什么樣的呢？

沒錯，已經從px轉換成了rem。 what？如果你的沒有從px變成rem, 那么你可能需要重啟一下項目呦~

溫馨提示： remUnit這個配置項的數值是多少呢？？？ 通常我們是根據設計圖來定這個值，原因很簡單，便於開發。假如設計圖給的寬度是750，我們通常就會把remUnit設置為75，這樣我們寫樣式時，可以直接按照設計圖標注的寬高來1:1還原開發。

那為什么你在這里寫成了37.5呢？？？那我們后面專門來講！

之所以設為37.5，是為了引用像mint-ui這樣的第三方UI框架，因為第三方框架沒有兼容px2rem ，將remUnit的值設置為設計圖寬度（這里為750px）75的一半，即可以1:1還原mint-ui的組件，否則會樣式會有變化，例如按鈕會變小。

既然設置成了37.5 那么我們必須在寫樣式時，也將值改為設計圖的一半

 

實現字體的適配

// 設置 rem 函數
    function setRem() {
        // 375px iphone6 屏幕的大小; 375px = 20rem; 1rem = 18.75px
        let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
        //得到html的Dom元素
        let htmlDom = document.getElementsByTagName('html')[0];
        //設置根元素字體大小
        htmlDom.style.fontSize = htmlWidth * 2 / 20 + 'px';
    }
    // 初始化
    setRem();
    // 改變窗口大小時重新設置 rem
    window.onresize = function() {
        setRem()
    }

 

原文地址：https://www.cnblogs.com/lml2017/p/9953429.html