airen / vw-layout

Mobile website layout with viewport units

vw-layout

Mobile website layout with viewport units.

vw-layout is an NPM package that helps you to create the mobile website layout with viewport units. It dependencies on postcss-aspect-ration-mini,postcss-px-to-viewport and postcss-viewport-units.

In addition, to be compatible with more mobile devices, the viewport unit is required to use polyfill from the viewport unit. We can use the Viewport Units Buggyfill.

Install

npm i vw-layout --save

Usage

Add the following code to the entry file. eg. Vue project, in the main.js file:

import 'vw-layout'

If your project uses a webpack, you can add the associated PostCSS plug-in configuration to the postcssrc.js file.

module.exports = {
    "plugins": {
        "postcss-aspect-ratio-mini": {}, 
        "postcss-px-to-viewport": {
            viewportWidth: 750,      // (Number) The width of the viewport.
            viewportHeight: 1334,    // (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.
        }, 
        "postcss-viewport-units":{},
    }
}

If your project is not using a webpack, go to the corresponding PostCSS plug-in website and view the configuration.

• postcss-aspect-ration-mini via @yisibl
• postcss-px-to-viewport via @evrone
• postcss-viewport-units via @springuper
• Viewport Units Buggyfill via @rodneyrehm

Thanks

Special thanks to @yisibl、 @evrone and @springuper for providing such an excellent PostCSS plug-in. Tanks to @rodneyrehm for providing viewport units polyfill.

License

MIT.