• 移動端適配
  • 一：移動裝置和pc裝置的區別
    • 1：解析度不一樣
  • 2：應用的尺寸不一
    • 1:em
    • 2:rem (r : root)
    • 二：移動端適配
    • 1: Rem適配
    • 2: vw或者vh適配.

移動端適配

一：移動裝置和pc裝置的區別

1：解析度不一樣

pc的分佈率是72，手機的解析度各不相同。

為了解決解析度各不相同的問題，需要利用meta標籤設定視口。( 把所有手機的解析度都當成72來處理 )

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

2：應用的尺寸不一

pc網頁的內容寬度一般是固定.1000或者1200.

移動端的app一般都是鋪滿手機螢幕,然而不同的手機尺寸不一樣,因此樣式就應該不一樣.因此移動端的必須做適配,保證一套樣式可以適配多種手機.

兩個單位:

1:em

相對於當前的標籤的字號計算. 例如當前的標籤字號是30.則1em就是30px.

2:rem (r : root)

相對於html標籤的字號計算. 例如html標籤的字號是30.則1rem就是30px.

二：移動端適配

1: Rem適配

原理: 根據不同的視口寬度,設定不同的html字號.

利用外掛監聽視口的寬度變化,設定對應的html根字號.

可以使用的外掛：lib-flexible，amfe-flexble。（ 淘寶的移動端適配外掛 ）( 換算比例都是1:10 )

字號自動設定之後，還可以藉助外掛自動根據px計算rem。

推薦下載postcss-px2rem.這個外掛也需要設定html的字號.remUnit:32.

應該在postcss.config.js內進行根字號設定.

如果1px不需要轉換成rem.1px就寫成 1PX

安裝amfe-flexible外掛 ( 根據不同的螢幕寬設定不同的根字號大小 )

npm i -S amfe-flexible;

引入外掛amfe-flexible

import 'amfe-flexible';

安裝postcss-px2rem ( 根據根字號大小, 把px轉換成rem )

npm i postcss-px2rem -D

初始的html字號設定為多少？

1：需要知道設計稿的寬度。

2：需要知道外掛的換算比例。

初始的html字號 = 用設計稿的寬 * 換算比例.

在專案根目錄下，新建一個postcss.config.js檔案進行配置。

module.exports = {
    plugins: {
       autoprefixer: {},
      'postcss-px2rem':{
        // 設定1:10的比例下,750寬的設計稿的預設html字號大小.
        remUnit:75,
        // 所有的樣式都會轉換為rem
        propList: ['*'],
        // node_modules內部所有的樣式都不轉換為rem
        exclude: /node_modules/i,
        // 所有包含.acitve的選擇器樣式都不轉換為rem
        selectorBlackList: ['.active']
      }
    }
}

2: vw或者vh適配.

vw: 相對於視口寬度動態計算px

vh: 相對於視口的高度計算px

百分比: 相對於父元素的寬或高來設定px.

藉助於外掛 postcss-px-to-viewport 幫助我們在不同的設計稿寬度下自動把px換成vw或者vh.

安裝 postcss-px-to-viewport外掛

npm i postcss-px-to-viewport -D

postcss-px-to-viewport也需要配置postcss.config.js

module.exports = {
    plugins: {
       autoprefixer: {},
      'postcss-px-to-viewport': {
        viewportWidth: 320,   // 視窗的寬度，對應的是我們設計稿的寬度，一般是750
        viewportHeight: 1334, // 視窗的高度，根據750裝置的寬度來指定，一般指定1334，也可以不配置
        unitPrecision: 3,     // 指定`px`轉換為視窗單位值的小數位數
        viewportUnit: "vw",   //指定需要轉換成的視窗單位，建議使用vw
        selectorBlackList: ['.ignore'],// 指定不轉換為視窗單位的類，可以自定義，可以無限新增,建議定義一至兩個通用的類名
        minPixelValue: 1,     // 小於或等於`1px`不轉換為視窗單位，你也可以設定為你想要的值
        mediaQuery: false     // 允許在媒體查詢中轉換`px`
      },
    }
}