rem

rem 是根据根元素的 font-size 来设置元素的尺寸

根元素 font-size

首先，为文档的根元素设置一个大小

因为设计图是以 iPhone 6 的尺寸做的，所以用设置宽度除以 3.75 ，如果在 iPhone 6 下，得到根元素的 font-size 为 100px

如果是其它宽度的手机，根元素的 font-size 便会按比例缩小

1
2
3
4
5
6
7
8
9
10
11

<script>
  function initRem() {
    function resizeRem() {
      var rootElement = document.documentElement;
      rootElement.style.fontSize = Math.min(rootElement.clientWidth, 640) / 3.75 + 'px';
    }
    resizeRem();
    window.addEventListener('resize', resizeRem, false);
  }
  initRem();
</script>

具体元素 font-size

之后，设置其它元素的大小

1
2
3
4
5
6

.end_text {
  font-size: 0.17rem;
  font-weight: 600;
  margin-bottom: .2rem;
  color: #404A54;
}

0.17rem 也就是 根元素 font-size 的 0.17 即 17px

同样， margin-bottom 为 20px

1. 适用于不同手机上的页面，如果还要顾及电脑浏览器页面，那就要配合 media query 来使用

2. 设置 根元素 font-size 为 100px 之后，会影响到一些图片所在 div 的高度，需要单独为这些 div 设置 font-size 为 initial