px/em/rem/vw 之間的換算關系

1.px 瀏覽器項目一種相對單位，是相對於想時期屏幕分辨率而言

2.em是css單位，他是根據父元素來設定大小

3.rem是css3的相對單位，相對於html根元素的字體大小來計算，可以設置大小，默認為16px

3.1 字體大小可以柑橘媒體查詢進行適配

@media only screen and (max-width: 1600px) and (min-width: 1280px){
    html{
      font-size: 14px;
    }
  }
  @media only screen and (max-width: 1280px) and (min-width: 960px){
    html{
      font-size: 12px;
    }
  }
  @media only screen and (max-width: 960px){
    html{
      font-size: 10px;
    }
  }

4.vw,vh相對於視窗口的寬度或者高度 500px/100vw,長度和寬度等於窗口的寬度1/100，

5.vw和vh對於百分比的區別

5.1. % 是相對於父元素的大小設定的比率， vw、 vh 是視窗大小決定的。

5.2. vw、 vh 優勢在於能夠直接獲取高度，而用  % 在沒有設置  body 高度的情況下，是無法正確獲得可視區域的高度的，所以這是挺不錯的優勢。

---

 

一般手機的長度是實際設計過程中的2倍，一個手機750*1200的分辨率，設計中為375px * 600px

vw是viewheight的縮寫 100vw是一個屏幕的寬度，100vh是一個屏幕的高度

設計稿為375px * 600px  換算 1/100*375 = 3.75 所以 1vw=3.75換算 1/ 100*600 = 6 所以1vh=6px

將html 設置font-size為合適的vw值是適配移動端的設備

 rem可以編寫的移動端網頁盡可能適配設備，而不會出現不同手機顯示想過不同的現象

px瀏覽器像素設置HTML font-size:37.5 設計圖為375px*600px 1rem=37.5vw=100px

vw，vh是基於視口的布局方案，要在meta視口聲明

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

---

 可以通過插件來完成 數值轉換 postcss-px-to-viewprot 將px轉為vw

https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md

1.安裝 npm install postcss-px-to-view --save-dev

2.配置 這是是vue下的配置 在vue.config.js配置文件，在該文件中寫入內容

import pxtovw from "postcss-px-to-viewport";
module.export = {
  css: {
    loaderOptions: {
      sass: {},
      css: {},
      postcss: {
        plugin: [
          new pxtovw({
            unitToConvert: "px",
            viewportWidth: 320,
            unitPrecision: 5,
            propList: ["*"],
            viewportUnit: "vw",
            fontViewportUnit: "vw",
            selectorBlackList: [],
            minPixelValue: 1,
            mediaQuery: false,
            replace: true,
            exclude: undefined,
            include: undefined,
            landscape: false,
            landscapeUnit: "vw",
            landscapeWidth: 568,
          }),
        ],
      },
    },
  },
};

配置列表

• unitToConvert (String) 需要轉換的單位，默認為"px"
• viewportWidth (Number) 設計稿的視口寬度
• unitPrecision (Number) 單位轉換后保留的精度
• propList (Array) 能轉化為vw的屬性列表
  • 傳入特定的CSS屬性；
  • 可以傳入通配符""去匹配所有屬性，例如：['']；
  • 在屬性的前或后添加"*",可以匹配特定的屬性. (例如['position'] 會匹配 background-position-y)
  • 在特定屬性前加 "!"，將不轉換該屬性的單位 . 例如: ['*', '!letter-spacing']，將不轉換letter-spacing
  • "!" 和 ""可以組合使用， 例如: ['', '!font*']，將不轉換font-size以及font-weight等屬性
• viewportUnit (String) 希望使用的視口單位
• fontViewportUnit (String) 字體使用的視口單位
• selectorBlackList (Array) 需要忽略的CSS選擇器，不會轉為視口單位，使用原有的px等單位。
  • 如果傳入的值為字符串的話，只要選擇器中含有傳入值就會被匹配
    • 例如 selectorBlackList 為 ['body'] 的話， 那么 .body-class 就會被忽略
  • 如果傳入的值為正則表達式的話，那么就會依據CSS選擇器是否匹配該正則
    • 例如 selectorBlackList 為 [/^body$/] , 那么 body 會被忽略，而 .body 不會
• minPixelValue (Number) 設置最小的轉換數值，如果為1的話，只有大於1的值會被轉換
• mediaQuery (Boolean) 媒體查詢里的單位是否需要轉換單位
• replace (Boolean) 是否直接更換屬性值，而不添加備用屬性
• exclude (Array or Regexp) 忽略某些文件夾下的文件或特定文件，例如 'node_modules' 下的文件
  • 如果值是一個正則表達式，那么匹配這個正則的文件會被忽略
  • 如果傳入的值是一個數組，那么數組里的值必須為正則
• include (Array or Regexp) 如果設置了include，那將只有匹配到的文件才會被轉換，例如只轉換 'src/mobile' 下的文件 (include: /\/src\/mobile\//)
  • 如果值是一個正則表達式，將包含匹配的文件，否則將排除該文件
  • 如果傳入的值是一個數組，那么數組里的值必須為正則
• landscape (Boolean) 是否添加根據 landscapeWidth 生成的媒體查詢條件 @media (orientation: landscape)
• landscapeUnit (String) 橫屏時使用的單位
• landscapeWidth (Number) 橫屏時使用的視口寬度

可能會遇到問題：

插件會將所有樣式px轉為vw，如果引入第三方UI，也會被轉化，可以使用selectorBlackList屬性進行過濾，如果個別地方不想轉為vw，可以用大寫PX Px代替