vw-layout

    1.0.6 • Public • Published

    vw-layout

    Travis Build Status Build status

    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.

    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.

    Install

    npm i vw-layout

    DownloadsWeekly Downloads

    6

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    28.1 kB

    Total Files

    26

    Last publish

    Collaborators

    • w3cplus_damo