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代替