移动端布局

1. REM布局

根据设计稿动态计算 html 的font-size

蓝湖上的设计稿.png

公式：fontSize = 100 * (clientWidth / 设计稿的宽度) + 'px';

(function (doc, win) {
      const docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
        recalc = function () {
          const clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          docEl.style.fontSize = 100 * (clientWidth / 360) + 'px';  // 这里的360是设计稿的宽度
        };
      recalc();
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
    })(document, window)

如果还要兼容上PC屏幕的话，可以这么写：

(function (doc, win) {
      const docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
        recalc = function () {
          const clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          if (clientWidth >= 640) {  // 如果超过手机设计稿，则按照 pc 固定基本 fontSize
                    docEl.style.fontSize = '100px';
                } else {
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                }
        };
      recalc();
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
    })(document, window)

用的时候直接把设计稿上的px，小数点往前挪动两位即可，
比如：

// 设计稿：
width: 325px;

// 写法：
width: 3.25rem;

当然啦，也不一定所有单位都用rem，比如一些固定位置的，某些情况的margin、padding、top、left等可以用px

2. 微信小程序、uni-app的rpx布局

公式：750rpx * 元素宽度 / 设计稿宽度

例如：设计稿750px宽度
那么恭喜您，你设计稿上量出宽度是多少，那么你就定义多少rpx，即 1px = 1rpx

例如：设计稿360px宽度
那么很遗憾，你需要转换一下 1px = 750/360 rpx

利用 scss：

@function mRpx($px) {
    @return 750rpx * $px / 360;;  // 这里的360是设计稿的宽度
}

使用：

设计稿量出宽度是多少，那么你就定义多少

// 设计稿：
width: 325px;

// 写法：
width: mRpx(325);

3. vw、vh布局

宽度分为100份，每一份是1vw；高度分为100份，每一份1vh

利用 scss：

// 根据设计稿宽度360，设计的vw适应
$base_width: 360;
$base_height: 640;

@function vw($px) {
  @return ($px / $base_width) * 100vw;
}

@function vh($px) {
  @return ($px / $base_height) * 100vh;
}

使用：

设计稿量出宽度是多少，那么你就定义多少

// 设计稿：
width: 325px;

// 写法：
width: vw(325);

这些布局不一定每一处都使用，要灵活结合百分比%、flex、float等。
如果要兼顾多设备的布局变化，需要媒体查询@media

// 屏幕宽度小于300px时候：
@media screen and (max-width: 300px) {
    .container {
       width: 300px;
    }
}