fpx.js

fpx.js简介

fpx.js是一款不依赖任何库的移动端界面适配插件，可以自定义设计稿大小，让移动端的适配更加方便快捷！

fpx.js有自己独立的尺寸单位，使用fpx.js，将不会对您目前项目已有的UI产生任何影响！

fpx.js将会让您用最少的代码去体验效果最强的适配！

fpx.js的尺寸

尺寸单位: fpx

fpx.js对于所有机型默认的设计稿宽度都设置为 750fpx ，所以您在做界面适配的时候并不需要考虑当前机型的屏幕大小，只需要计算好整屏的宽度便可以，fpx.js已经为您做好了一切！

运行环境

fpx.js需要通过服务器环境去运行，如果您安装了Node，可以通过 npm install -g http-server 去安装一个简易的服务器模块，然后通过 http-server 命令去启动服务器

npm install -g http-server  // 安装服务器
http-server                 // 启动服务器

安装fpx.js

CDN地址:(保持最新版本)

<script src="http://www.fchany.com/fpx/fpx.js"></script> // 持续维护的线上版本，推荐下载到本地使用

NPM:

npm install fchany-fpx --save

开始使用

初始化方法:

var fpx = new Fpx();
fpx.import();

初始化fpx.js之后，便可以在您的<style>中去尝试您的样式了，注意fpx.js只会解析 fpx 为单位的css文本，比如默认情况下设计稿的宽度为750fpx，这种情况下如果要做一个宽度两等分的元素，只需要把两个元素的宽度设置为 375fpx 便可以轻松达到自适应的目的！

PS：fpx.js 不接受在标签内部定义内联样式，这样不会影响样式的定义，但是将不会转换内联样式中的 fpx 单位。如果您只是定义一些不需要 fpx.js去参与转换的样式，可以放心使用！

<div style="width:375fpx;height:375fpx;background:red;"></div> // fpx单位不会解析
<div style="width:375px;height:375px;background:red;"></div>   // 样式不影响

导入外部的css

new Fpx() 方法会返回一个fpx实例，通过这个实例下的 import 方法可以导入外部的css，具体参数后面会详细介绍

var fpx = new Fpx();
fpx.import([
    {url: "css1路径", root: "#header"}, // root参数为css作用域的挂载点，但不包括本节点
    {url: "css2路径", root: "#footer"}  // root参数为css作用域的挂载点，但不包括本节点
])

import方法导入的css只能是本地资源的路径，如果是第三方服务器资源的路径(列如http | https)，fpx.js无权去操作该文件！查看原因

PS：在 <link> 标签中引入的外部css，fpx.js只会转换本地路径 css文件，如果导入服务器连接的外部资源，fpx.js将无权操作该文件，但不影响正常使用！查看原因

<link href="http://******.css"> // fpx.js无权操作该文件，但是不影响该文件的正常导入
<link href="./******.css">      // 本地文件路径，fpx.js可以直接参与转换并解析该文件

new Fpx(options) options具体参数

参数名	默认值	参数类型	作用	是否必填
width	750	Number	设置设计稿的宽度	否
minWidth	0	Number	当屏幕宽度小于这个参数的时候，fpx.js不再去监听，最低版本 1.0.7 ，CDN地址一直保持最新，npm安装请注意版本	否
maxWidth	750	Number	当屏幕宽度超过这个参数的时候，fpx.js不再去监听	否

import(options, callback)具体参数

参数名	默认值	参数类型	作用	是否必填
options	[]	Array	导入css资源具体配置详见下方css参数配置	否
callback	function	Function	所有资源导入之后的回调	否

css参数配置

css是个数组类型的参数，接收多个Object的参数配置，Object的配置如下

参数名	默认值	参数类型	作用	是否必填
url	--	String	导入css的路径，这个路径必须是本地路径，否则fpx.js 无权对该css文件做任何操作！查看原因	是
root	--	String	导入css资源后，指定改资源的挂载点，也就是这个css文件所影响的区域，但不包括本节点，列如#app(id="app") \| .app(class="app") \| html(html标签)	是

对vue-cli的适配

传送门