效果图展示区: 

1. 想要把px自动转换单位为vw需要项目根目录.postcssrc.js中进行配置以下代码

module.exports = {plugins: {autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等"postcss-px-to-viewport": {unitToConvert: "px", // 要转化的单位viewportWidth: 1080, // UI设计稿的宽度unitPrecision: 6, // 转换后的精度，即小数点位数propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vwfontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vwselectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认falsereplace: true, // 是否转换后直接更换属性值exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配landscape: false // 是否处理横屏情况}}
};

配置完之后重启项目根据ui图的px写css就可以达到ui图效果咯~

2. 最近做项目需要移动端默认横屏展示大屏, 需要在css中设置当前页面最外层元素中加入媒体查询判断横屏还是竖屏, 例如.box是我的当前页面最外层元素

注意: 需要把ui图宽和高设置相反的, 这样可以达到效果 比如: 1920 - 1080  那就设置width:1080px 高1920px

.box {width: 1080px;height: 1920px;@media screen and (orientation: portrait) {position: absolute;width: 100vh;height: 100vw;top: 0;left: 100vw;-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg);transform-origin: 0% 0%;}@media screen and (orientation: landscape) {position: absolute;top: 0;left: 0;width: 100vw;height: 100vh;}}