移动端h5之rem布局

安格大约 2 分钟...

参考

项目实践

引入 amfe-flexible

由于 viewport 单位得到众多浏览器的兼容，lib-flexible 这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用 viewport 来替代此方。

<meta
  name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<script src="./node_modules/amfe-flexible/index.js"></script>
<!-- 或直接嵌入代码 -->
<script>
  !(function (e, t) {
    function n() {
      t.body
        ? (t.body.style.fontSize = 12 * o + "px")
        : t.addEventListener("DOMContentLoaded", n);
    }
    function d() {
      var e = i.clientWidth / 10;
      i.style.fontSize = e + "px";
    }
    var i = t.documentElement,
      o = e.devicePixelRatio || 1;
    if (
      (n(),
      d(),
      e.addEventListener("resize", d),
      e.addEventListener("pageshow", function (e) {
        e.persisted && d();
      }),
      o >= 2)
    ) {
      var a = t.createElement("body"),
        s = t.createElement("div");
      (s.style.border = ".5px solid transparent"),
        a.appendChild(s),
        i.appendChild(a),
        1 === s.offsetHeight && i.classList.add("hairlines"),
        i.removeChild(a);
    }
  })(window, document);
</script>

配置 Gulp

引入 postcss-px2rem

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

gulp.task("default", function () {
  var processors = [px2rem({ remUnit: 75 })];
  return gulp
    .src("./src/*.css")
    .pipe(postcss(processors))
    .pipe(gulp.dest("./dest"));
});

Gulp 项目 demo

项目目录

.
├── gulpfile.js
├── index.html
├── package.json
├── readme.md
├── libs
│   ├── axios
│   │   └── 0.21.1
│   ├── jquery
│   │   └── 3.6.0
│   ├── lib-flexible
│   │   └── 2.0
│   └── vue
│       └── 2.6.9
├── src
│   ├── script
│   │   ├── common.js
│   │   └── index.js
│   └── style
│       ├── _vars.scss
│       ├── common.scss
│       └── index.scss
├── static
│   ├── css
│   │   ├── common.min.css
│   │   └── index.min.css
│   ├── images
│   │   └── favicon.ico
│   └── js
│       ├── common.min.js
│       └── index.min.js
└── yarn.lock

gulpfile.js

const { src, dest, watch, series, parallel } = require("gulp");
const sass = require("gulp-sass")(require("sass"));
const connect = require("gulp-connect");
const postcss = require("gulp-postcss");
const px2rem = require("postcss-px2rem");
const cssnano = require("gulp-cssnano");
const uglify = require("gulp-uglify");
const rename = require("gulp-rename");

// 将屏幕宽度分成10rem:
// 若设计稿宽度375,则remUnit为37.5; 同理750的设计稿remUnit为75;
const remUnit = 37.5;
const processors = [px2rem({ remUnit: remUnit })];

// 处理sass文件
function styles() {
  return (
    src("./src/style/*.scss")
      // 处理sass
      .pipe(sass())
      // px2rem
      .pipe(postcss(processors))
      // 生成css文件到目标目录
      // .pipe(dest('./static/css'))
      // 压缩css
      .pipe(cssnano())
      // 重命名为.min
      .pipe(
        rename({
          suffix: ".min",
        })
      )
      // 生成css.min文件到目标目录
      .pipe(dest("./static/css"))
  );
}

// 处理js文件
function scripts() {
  return (
    src("./src/script/*.js")
      // uglify
      .pipe(uglify())
      // 重命名为.min
      .pipe(
        rename({
          suffix: ".min",
        })
      )
      // 生成js文件到目标目录
      .pipe(dest("./static/js"))
  );
}

// 开发环境服务
function devServer(cb) {
  connect.server(
    {
      root: "./",
      port: 18081,
      livereload: true,
      livereload: {
        port: 58081,
      },
    },
    cb
  );
}

// 监听文件
function watchFiles() {
  watch("src/style/*.scss", styles);
  watch("src/script/*.js", scripts);
  watch(["*.html", "static/css/*.css", "static/js/*.js"], function () {
    return src("*").pipe(connect.reload());
  });
}

const build = parallel(styles, scripts);

const serve = parallel(watchFiles, devServer);

/**
 * 编译构建：gulp build
 * 启动服务：gulp serve
 * 默认(启动服务)：gulp
 */
exports.build = build;
exports.serve = serve;
exports.default = serve;