Can we set different 'viewportWidth', etc. based on Media Query ?

[mike652638]

I've seen a similar issue #32 there, the landscape* options do make sense somehow. However, that's sort of trick method which may not cover all situations directly.

Imagine, we have 3+ pieces of UI draft 750px2000px for Mobile, 1920px 1080px for PC, and even another 4096px * 2160px for big screen, can we config somehow like the following:

{
  mediaQuery: true,
  viewportWidth: {
   {
   maxWidth:750,
   value: 750
   },
  {
   minWidth: 751,
   maxWidth:1920,
   value: 1920
   },
  {
   minWidth:1921,
   value: 4096
   }
 }
}

Then we write in css with media querys like:

@media only screen and (max-width: 750px) {
  .section {
     width: 300
  }
}

@media only screen and (min-width: 751px) and (max-width: 1920px) {
  .section {
     width: 700
  }
}

@media only screen and (min-width: 1921px) {
  .section {
     width: 1900
  }
}

Which then convert and output accordingly:

@media only screen and (max-width: 750px) {
  .section {
     width: 40vw
  }
}

@media only screen and (min-width: 751px) and (max-width: 1920px) {
  .section {
     width: 36.458vw
  }
}

@media only screen and (min-width: 1921px) {
  .section {
     width: 46.387vw
  }
}

Is that possible please? Thanks :)