rem-移动端响应式适配方案

借助rem单位，我们可以实现移动端网页内元素随着屏幕宽度的改变而正相关地改变大小。假设美工提供的设计稿宽度为750px。那么你需要用类似下面这样的代码去动态修改html元素的font-size值，进而影响那些使用rem为单位设定尺寸的元素的大小。

default

import { $, getLocalStorage } from '@/scripts/utils.js'

function fit () {
  const scale = $('body').width() / 750
  $('html').css('font-size', 100 * scale + 'px')
}

$(document).ready(() => {
  // 如果你需要单独处理pc端的样式，可以去掉下面的注释
  // const userAgent = window.navigator.userAgent.toLowerCase()
  // if (userAgent.indexOf('android') === -1 && userAgent.indexOf('iphone') === -1) {
  //   $('body').addClass('pc')
  // }
  $('html').css('height', $(window).height() + 'px')
  fit()
  $(window).resize(fit)
})

然后页面上的元素，就根据从750px的设计稿上量取到的长度，除以100，来计算采用rem单位时需要写的值。比如，如果一个div在750px设计稿上对应的宽度为600px，那给这个div写宽度值时就可以这么写：

default

.div {
  width: 6rem;
}

直接除以（对，除和除以是不一样的。。。）100，是不是计算起来很方便-\_-。

rem-移动端响应式适配方案 ​

rem-移动端响应式适配方案