关于移动端开发中的适配插件和1px像素问题

物理像素和逻辑像素

  如果想搞清楚为什么移动端要适配和1px像素的问题，首先就是要了解为什么会出现这两个问题，这就和物理像素和逻辑像素有关。

物理像素
  物理像素是组成相机成像传感器的最基础单元。移动设备出厂时，就具备的分辨率。

逻辑像素
  px实际是pixel（像素）的缩写，根据 维基百科的解释，它是图像显示的基本单元，既不是一个确定的物理量，也不是一个点或者小方块，而是一个抽象概念。

DPI
  像每英寸长度内的像素点数。DPI（Dots Per Inch，每英寸点数）是一个量度单位，用于点阵数码影像，指每一英寸长度中，取样、可显示或输出点的数目。

小结
  简单的说，代码中的px并不能等于所有手机的物理像素，那么就会出现一个问题，1px在不同手机中表现出的样式会不一样，有的用1.5个物理像素来表示1个逻辑像素，其实就是比例为2 ，那么就等于 9个物理像素表示2个逻辑像素，如果比例是2，那么就是4个物理像素表示1个逻辑像素，如果比例是3，那么就是9个物理像素表示1个逻辑像素，大概画个图就更容易理解吧，px并不是最小单位，还可以划分的意思？你懂我意思吧。
  那么问题来了，px是一样的，反映到了不同的移动端中，DPI不一样，就导致显示不一样，那么怎么才能适配移动端还有1px是什么问题呢？先说1px，边框的问题，之前说了因为DPI不一样，边框粗细不一样，但是我们就想让它在所有设备上都一样，怎么解决？

1px边框解决最佳方案

如果想解决这个问题：

• 要知道设备的DPI是多少，也就是和像素比例是多少，使用媒体查询
• 第二知道比例怎么更改边框粗细，使用css3中的transform来缩放
• 第三个问题如果直接缩放就会导致不仅仅是边框进行缩放，div或者元素上的所有内容都会缩放，这不是我们要的结果，使用伪元素和定位来解决
• ok 上代码

@mixin border_1px($color) {
  position: relative;
  @media (-webkit-min-device-pixel-ratio:1.5),
  (min-device-pixel-ratio:1.5) {
    &::before {
      content: " ";
      position: absolute;
      left: 0px;
      top: 0px;
      background-color: $color;
      transform: scaleY(0.667);
      height: 1px;
      width: 100%;
    }
  }
  @media (-webkit-min-device-pixel-ratio:2),
  (min-device-pixel-ratio:2) {
    &::before {
      content: " ";
      position: absolute;
      left: 0px;
      top: 0px;
      background-color: $color;
      transform: scaleY(0.5);
      height: 1px;
      width: 100%;
    }
  }
  @media (-webkit-min-device-pixel-ratio:3),
  (min-device-pixel-ratio:3) {
    &::before {
      content: " ";
      position: absolute;
      left: 0px;
      top: 0px;
      background-color: $color;
      transform: scaleY(0.333);
      height: 1px;
      width: 100%;
    }
  }
}

<style lang="scss" scoped>
  @import "@/assets/style/mixin.scss";
  li{
    margin: 0 15px;
    font-size: 13px;
    @include border_1px($width:12px, $height:2px, $left:20px, $top:20px, $color:#D0B969);
    }
</style>

直接拿去使用吧，如果需要调整线的位置，直接调整left和top即可

移动端适配

布局方式：

• 流式布局（通过 viewport + flex + px）
• rem布局 （rem 单位）
• 响应式布局 （利用媒体查询，即 media queries，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局）

流式布局
  简单理解：屏幕越大，我看的内容越多，内容跟着屏幕大小改变。
  流式布局直接写就行了，也就是弹性布局

rem布局
  简单理解：屏幕多大，我看的内容都是一样多，内容不跟着屏幕大小改变。
  rem需要使用em，rem一些相对单位，推荐使用插件postcss-px-to-viewprot
  $npm i -D postcss-px-to-view
  配置config.js 这个还是去postcss-px-to-view官网查看比较好

 css: {
    loaderOptions: {
      css: {
        
      },
      postcss: {
        plugins: [
          new pxtovw({
            unitToConvert: 'px',   //px
            viewportWidth: 375,		//尺寸
            unitPrecision: 5,		//精度
            propList: ['*'],		//指定转换的类名 默认是通配符
            viewportUnit: 'vw',		//视口单位
            fontViewportUnit: 'vw',	//字体单位
            selectorBlackList: [],	//指定不转换的类名
            minPixelValue: 1,		//最小值 1px
            mediaQuery: false,		//媒体查询
            replace: true,			//替换包含vw的规则，而不是添加备用规则。
            exclude: [/node_modules/],		//除外
          })
        ]
      }
    }
  }

响应式布局
  简单理解：和屏幕没关系，你的设备是什么？我先看看你用的什么设备，然后根据你用的设备来调整我内容。
  摘抄的一个栗子:

@media all and (min-width:500px) and (max-width:700px) { #box{background:blue }}
@media not all and (min-width:500px) {#box{background:blue}}

@media all not ( orientation:portrait ){ #box{ background:yellow } }
@media all not ( orientation:landscape ){ #box{ background:yellow } }