fpx.js简介
fpx.js是一款 不依赖 任何库的移动端界面适配插件,可以自定义设计稿大小,让移动端的适配更加方便快捷!
fpx.js有自己独立的尺寸单位,使用fpx.js,将 不会 对您目前项目已有的UI产生 任何 影响!
fpx.js将会让您用 最少 的代码去体验效果 最强 的适配!
fpx.js的尺寸
尺寸单位: fpx
fpx.js对于 所有机型 默认的设计稿宽度都设置为 750fpx ,所以您在做界面适配的时候并不需要考虑当前机型的屏幕大小,只需要计算好整屏的宽度便可以,fpx.js已经为您 做好了一切!
安装fpx.js
NPM:
npm install fchany-fpx-vue --save

开始使用
初始化方法:
import Vue from "vue";
import Fpx from "fchany-fpx-vue";

// options默认配置
const options = {
    width: 750, // 设计稿尺寸
    maxWidth: 750, // 最大尺寸
    minWidth: 0, // 最小尺寸
    baseStyle: { // 项目基础样式类
        a: {
            width: "750fpx",
            height: "500fpx",
            color: "red"
        },
        b: {
            width: "375fpx",
            height: "100fpx",
            background: "blue"
        }
    }
}
Vue.use(Fpx, options); // options参数均为可选参数

组件内
<template>
    <fpx :styles="styles">
        <div class="children-a">我占一半的宽度</div>
        <div class="children-b">我占一整屏的宽度</div>
    </fpx>
</template>
<script>
export default {
    data() {
        return {
            styles: {
                "children-a": {
                    width: "375fpx",
                    height: "100fpx",
                    background: "red"
                },
                "children-b": {
                    width: "750fpx",
                    height: "100fpx",
                    background: "green"
                }
            },
        }
    }
}
</script>

运行结果
建议把styles参数单独抽离,以免影响主逻辑代码
<template>
    <fpx :styles="styles">
        <div class="children-a">我占一半的宽度</div>
        <div class="children-b">我占一整屏的宽度</div>
    </fpx>
</template>
<script>
import styles from "./styles";
export default {
    data() {
        return {
            styles: styles
        }
    }
}
</script>
             
styles.js

export default {
    "children-a": {
        width: "375fpx",
        height: "100fpx",
        background: "red"
    },
    "children-b": {
        width: "750fpx",
        height: "100fpx",
        background: "green"
    }
}

// 元素关系嵌套写法
export default {
    a: {
        width: "750fpx",
        height: "100fpx",
        a1: {
            width: "375fpx",
            height: "100fpx",
            a11: {
                width: "375fpx",
                height: "100fpx"
            }
        }
    },
    b: {
        width: "750fpx",
        height: "100fpx",
        b1: {
            width: "375fpx",
            height: "100fpx",
            b11: {
                width: "375fpx",
                height: "100fpx"
            }
        }
    }
}

// 可以使用小驼峰命名规则定义css属性
fontSize、textAlign、marginLeft、paddingLeft、backgroundColor...

fpx-Attributes
参数名 默认值 参数类型 作用 是否必填
styles {} Object 设置该fpx组件下的样式
transition 200 Number 当fpx组件解析完styles属性之后,会有一个淡入效果,默认过渡时间为200ms
趣味组件
此组件作为fchany-fpx-vue版本的拓展组件
<template>
    <fpx :styles="styles">
        <fpx-list v-for="(item, i) in 50" :key="i">
            <div class="list-item">{{item}}</div>
        </fpx-list>
    </fpx>
</template>
<script>
export default {
    data() {
        return {
            styles: {
                "list-item": {
                    height: "100fpx",
                    background: "pink",
                    margin: "10fpx 0",
                    textAlign: "center",
                    lineHeight: "100fpx"
                }
            },
        }
    }
}
</script>

运行结果
fpxList-Attributes
参数名 默认值 参数类型 作用 是否必填
transition 200 Number 当fpxList组件进入可视区域之后,会有一个动画效果,默认过渡时间为200ms
type 200 String 元素进入可视区域的动画方式,可选left-in | bottom-in,默认为left-in