关于移动端的尺寸适配，vscode中支持自动转换的插件

引言：

在移动端开发，通常要为不同尺寸的设备进行尺寸的适配，比如盒子的大小会用相对的尺寸来定义，比如百分比，再者是rem相对尺寸，rem是根据根元素html设定的font-size来决定权重的，比如默认的font-size是16px，那么1rem=16px，那么你在编写样式的时候，通过计算像素来获得对应rem，这样尺寸变化也不会影响布局。还有一种则是视口viewport，简写为vw，viewport仅用于对页面中以px为单位的尺寸大小的缩小和放大，以抛开设备物理像素，以更舒适的像素去显示。

1媒体查询

概念：为不同的屏幕尺寸设定不同的css样式
基本用法：

div{
	width:100px;
	height:100px;
	background-color:#balck;
}
@media screen and (min-device-width:200px) and (max-device-width:300px){
	div{
		background-color:#red
	}
}
@media screen and (min-device-width:301px) and (max-device-width:400px){
	div{
		background-color:#blue
	}
}

这部分代码表示当屏幕宽度在200-300px之间的时候div背景色为红色，当屏幕宽度在301-400px之间div背景色为蓝色。

媒体查询的引入方式

style标签

<style media="(min-device-width:200px) and (max-device-width:300px)">样式</style>

link引入

<link href="index.css" media="(min-device-width:200px) and (max-device-width:300px)">

当屏幕尺寸在200-300之间时，使用index.css样式

2移动端的尺寸适配

下面介绍的是一种个人最为推荐的尺寸适配方案，那就是利用vscode插件amfe-flexible 、postcss-load-config、postcss-px-to-viewport
安装命令分别为：

npm i -S amfe-flexible
npm i -D postcss-load-config
npm i -D postcss-px-to-viewport

可以在npm资源区查看相关介绍和功能：npm资源官网 这里有非常丰富的资源。
安装完插件之后需要创建一个配置文件.postcssrc.js（命名自己取）配置如下：

module.exports = {
    "plugins": {
      "postcss-px-to-viewport": {
        viewportWidth: 375 * 10, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
        viewportHeight: 667, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
        unitPrecision: 2, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
        viewportUnit: 'rem', // 指定需要转换成的视窗单位，建议使用vw
        fontViewportUnit: 'rem',// vmin is more suitable.
        selectorBlackList: ['px'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
  
        // fix:兼容性问题
        minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
        mediaQuery: false // 允许在媒体查询中转换`px`
      }
    }
  }

然后可以在调试工具中更改尺寸看看根元素的font-size是否改变：


可以看到iphoneX 和iPhone6的尺寸对应的fong-size也相应改变了，这个时候你在编码时就可以放心的写常用单位px就可以了。