flow-adaptive-vue
v1.0.0
Published
Adaptive units for vue apps
Downloads
4
Readme
flow-adaptive-vue
SSR friendly vue plugin for flow-adaptive.js module.
What is flow-adaptive.js about?
It's about dynamic change of html element font-size for comfortable using of rem unit of measurement.
Installation
npm install flow-adaptive-vue
Usage
import Vue from 'vue'
import FlowAdaptive from 'flow-adaptive-vue'
Vue.use(FlowAdaptive, {
fontRatio: 1440 / 10, // the best practice is to set fontRatio to base layout width / 10
maxWidth: 1440,
minWidth: 650,
breakPoints: [
{
minWidth: 650,
maxWidth: 900,
fontRatio: 768 / 10,
},
{
maxWidth: 649,
fontRatio: 375 / 10,
},
],
})
And then all you need is to set all sizes in rem units. For example:
.foo {
font-size: 1.6rem; // equal to 16px on 1440px, on 768px and on 375px screen width
}