手机端自适应单位换算

移动端自适应布局之单位换算

首先头部全部需要引入如下文件

flexible.debug.js + flexible_css.debug.js+update.js

方式一

使用cssrem+sublime,布局开始时，设置配置文件（例如：视觉稿640*1136）就设置为64
width:100p + tab 自动生成rem单位

方式二

使用这个源文件还是px，容易修改，上面的源文件都改为rem了
使用gulp转换
npm install gulp-postcss

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var px2rem = require('postcss-px2rem');

             //这里的75和cssrem一样根据视觉稿更改
gulp.task('default', function() {
      var processors = [px2rem({remUnit: 75})];
       return gulp.src('./src/*.css')
        .pipe(postcss(processors))
        .pipe(gulp.dest('./dest'));
    });

.vue文件

这个和方式一相同，可以直接在sublime中使用

react native

import {Dimensions} from 'react-native';
//app 只有竖屏模式，所以可以只获取一次 width
const deviceWidthDp = Dimensions.get('window').width;
// UI 默认给图是 640
const uiWidthPx = 640;

function pxToDp(uiElementPx) {
    return uiElementPx *  deviceWidthDp / uiWidthPx;
}
export default pxToDp;


调用方法
import pxToDp from './pxToDp';
<View style={{width:pxToDp(100),height:pxToDp(100)}}></View>

2016-12-07