search

wswmsword / postcss-mobile-forever

一款 PostCSS 插件，将固定尺寸的视图转为可跟随宽度变化而等比例伸缩的视图。To adapt different displays by one mobile viewport.
https://wswmsword.github.io/examples/mobile-forever/vanilla/
MIT License
325 stars 19 forks source link

媒体查询中的 vw 转换 #30

Closed 1390006090 closed 7 months ago

1390006090 commented 7 months ago

可以添加视口宽度吗？？跟随横竖屏 更换时候宽度

wswmsword commented 7 months ago

不好意思，没理解您的意思

1390006090 commented 7 months ago 
  postcsspxtoviewport8plugin({
      unitToConvert: 'px', // 需要转换的单位，默认为"px"
      viewportWidth: 1080, // 设计稿的视口宽度
      mediaQuery: true, // 媒体查询里的单位是否需要转换单位
      unitPrecision: 6, // 单位转换后保留的精度
      landscape: true, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
      landscapeUnit: 'vw',// 横屏时使用的单位
      landscapeWidth: 1920,// 横屏时使用的视口宽度
1390006090 commented 7 months ago

landscape: true, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape) 就是这个功能

wswmsword commented 7 months ago 
{
  "viewportWidth": 1080,
  "appSelector": "#app",
  "enableMediaQuery": true,
  "landscapeWidth": 1920,
}

插件可以设置媒体查询横屏下的视口宽度，您看下这个符合你的需求吗？上面的 "landscapeWidth": 1920 设置了横屏时的视口宽度 1920 像素，如果再设置 "desktop: xxx"，就是设置桌面端的视口宽度为 xxx。

1390006090 commented 7 months ago 
  "mobileUnit":"vw",
      "viewportWidth": 1080,
      "appSelector": "#app",
      "enableMediaQuery": true,
      "landscapeWidth": 1920,
      "desktopWidth":1920

![Uploading 1711616172196.jpg…]()

1390006090 commented 7 months ago

@media (min-width: 1920px) and (max-height: 640px), (max-width: 1920px) and (min-width: 1920px) and (orientation: landscape)