evrone / postcss-px-to-viewport

A plugin for PostCSS that generates viewport units (vw, vh, vmin, vmax) from pixel units. The best choice to create a scalable interface on different displays by one design size.
https://evrone.com/postcss-px-viewport
MIT License
2.99k stars 401 forks source link

how to set different 'viewportWidth'? #32

Closed lwpassvoice closed 5 years ago

lwpassvoice commented 5 years ago

I have two different pages, and I want to set different viewportWidth,but I don't know how to do.

      "postcss-px-to-viewport": {
        viewportWidth: 1440,     // (Number) The width of the viewport.
        viewportHeight: 900,    // (Number) The height of the viewport.
        unitPrecision: 3,       // (Number) The decimal numbers to allow the REM units to grow to.
        viewportUnit: 'vw',     // (String) Expected units.
        selectorBlackList: ['.ignore', '.hairlines'],  // (Array) The selectors to ignore and leave as px.
        minPixelValue: 1,       // (Number) Set the minimum pixel value to replace.
        mediaQuery: false       // (Boolean) Allow px to be converted in media queries.
      }, 

And the other:

      "postcss-px-to-viewport": {
        viewportWidth: 750,     // (Number) The width of the viewport.
        viewportHeight: 1335,    // (Number) The height of the viewport.
        unitPrecision: 3,       // (Number) The decimal numbers to allow the REM units to grow to.
        viewportUnit: 'vw',     // (String) Expected units.
        selectorBlackList: ['.ignore', '.hairlines'],  // (Array) The selectors to ignore and leave as px.
        minPixelValue: 1,       // (Number) Set the minimum pixel value to replace.
        mediaQuery: false       // (Boolean) Allow px to be converted in media queries.
      }, 
KODerFunk commented 5 years ago

@lwpassvoice hi! You can try use landscape* options:

      "postcss-px-to-viewport": {
        viewportWidth: 750,      // (Number) The width of the viewport.
        viewportHeight: 1335,    // (Number) The height of the viewport.
        unitPrecision: 3,        // (Number) The decimal numbers to allow the REM units to grow to.
        viewportUnit: 'vw',      // (String) Expected units.
        selectorBlackList: ['.ignore', '.hairlines'],  // (Array) The selectors to ignore and leave as px.
        minPixelValue: 1,        // (Number) Set the minimum pixel value to replace.
        mediaQuery: false,       // (Boolean) Allow px to be converted in media queries.

        landscape: true,         // (Boolean) Adds @media (orientation: landscape) with values converted via landscapeWidth.
        landscapeUnit: 'vw',     // (String) Expected unit for landscape option
        landscapeWidth: 1440     // (Number) Viewport width for landscape orientation.
      }, 
lwpassvoice commented 5 years ago

thanks~