Skip to content

移动端REM等比缩放解决方案

Jump to bottom
Furic Zhao edited this page Jan 26, 2018 · 3 revisions

FEZ已集成业界先进的移动端REM解决方案，开发人员照常使用px单位书写样式，FEZ会将样式中的px单位根据配置自动计算转换为rem单位。

如果您使用了第三方框架，比如framework7来开发项目，并且使用了bower来管理第三方框架库，FEZ也会自动将第三方框架中的px单位自动计算转换为rem单位。

  • 在fez.config.js中开启userRem配置
export default {
  useREM: {
    css: {
      available: true, //启用 css/less/sass/scss 中的 px => rem 转换
    }
  }
}
  • 在src/static/style样式目录新建公共样式rem.less(或者sass/scss)
static
└── styles
    ├── index.less
    ├── common.less
    └── lib
        └── rem.less

以上rem.less内容为：

/* rem.less */
// REM 适配
// 375px (iPhone 6) 此为基准值, 与视觉设计稿 `宽度/2` 保持一致
html {
    font-size: 16PX;
}
// 13.6533333 = 320*16/375 (iPhone 5)
@media only screen and (min-width: 320px) {
    html {
        font-size: 13.6533333PX !important;
    }
}
// base root size (iPhone 6)
@media only screen and (min-width: 375px) {
    html {
        font-size: 16PX !important;
    }
}
// 17.0666667 = 400*16/375 (Most Android)
@media only screen and (min-width: 400px) {
    html {
        font-size: 17.0666667PX !important;
    }
}
// 17.664 = 414*16/375 (iPhone 6 Plus)
@media only screen and (min-width: 414px) {
    html {
        font-size: 17.664PX !important;
    }
}
// 20.48 = 480*16/375 (iPad)
@media only screen and (min-width: 480px) {
    html {
        font-size: 20.48PX !important;
    }
}
// 桌面
@media only screen and (min-width: 768px) {
    html {
        font-size: 16PX !important;
    }
}

可自行根据实际项目使用高级配置设置基准值，FEZ默认使用iphone6屏幕下16px为基准值。

  • 在项目公共样式引入rem.less 
/* index.less 或 common.less */
@import "./lib/rem.less";
  • 执行gulp或gulp distFEZ都会将样式中的px转换为rem。

如果某些样式不需要REM转换，可使用大写的Px或PX，FEZ将忽略转换。

高级配置

export default {
  /**
   * 启用 PX => REM 自动化转换
   * 如果启用 REM 转换需要在公共样式中对<html>设置基准值
   * 通过 media媒体查询 为 <html> 设置不同值 以实现在不同的屏幕中等比缩放
   */
  useREM: {
    css: {
      available: true, //启用 css/less/sass/scss 中的 px => rem 转换
      /**
       * 配置参考：https://github.com/cuth/postcss-pxtorem
       */
      options: {
        rootValue: 16, //相对于html根字体大小
        unitPrecision: 5, //允许REM单位增长到的十进制数
        propList: ["*"], //可以从px更改为rem的属性
        selectorBlackList: [], //要忽略的选择器
        replace: true, //替换包含rems的规则，而不是添加fallback
        mediaQuery: false, //允许在媒体查询中转换px
        minPixelValue: 0 //设置要替换的最小像素值
      }
    }
  }
}
Clone this wiki locally