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.