postcss-px-to-viewport横屏适配

需求：项目使用的是vue2，屏幕适配用的是postcss-px-to-viewport。最开始是支持竖屏浏览，后期将项目横屏内嵌在其他app中。页面的字体和布局会变得很大，和app里的元素在一起显得十分不协调。需求就是：h5页面内嵌在app中需要字体大小和app协调。

尝试解决方案： 1.给body设置以下属性，无效。

body {
    -webkit-text-size-adjust: 100%;
    -webkit-text-size-adjust:  none;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  

2.在postcss.config.js的'postcss-px-to-viewport'中设置

propList:["*","!font*"]，

font-size不进行viewport转化。 这就影响了竖屏内容的展示。这个方案也相当于无效。

3.在postcss.config.js的'postcss-px-to-viewport'中设置

 landscape: true, // 是否处理横屏情况
 landscapeUnit:'vw', // (String) 横屏时使用的单位
 landscapeWidth: 1200 // (Number) 横屏时使用的视口宽度

需要注意的是，package.json中，postcss和post-px-to-viewport版本必须固定为下列版本：

 "postcss": "7.0.32",
 "postcss-px-to-viewport": "1.1.1",

同时配置按需下载依赖

 "resolutions": {
    "postcss": "7.0.32"
  }

同时要配合

body {
    -webkit-text-size-adjust: 100%;
    -webkit-text-size-adjust:  none;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }