h5移动端屏幕适配方案（rem、vw）

admin web前端 暂无评论 1,821 浏览

1、概述

移动端屏幕大小不一，要使网页能自适应不同尺寸的手机屏幕，而且还要尽可能开发便捷，目前使用最多的还是rem大法，相对比较成熟，而新兴的vw方案也可以一试。
本文主要介绍rem和vw两种方案的使用配置方式。

2、meta设置

首先移动端要设置好视口，使视口的宽度等于设备屏幕宽度，这样浏览器识别后就认为该网页是移动端网页，同时也就不再有点击300ms延迟的问题了：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">

3、rem方案

（1）原理

css中rem单位的计算是基于根字体大小，也就是html标签元素的font-size，未设置font-size时默认字体大小是16px，假设根字体大小就是16px，那比如2rem就等于2 * 16 = 32 px。
如果所有涉及尺寸的css单位都用rem来写，那实际尺寸就取决于根字体大小是多少了，那如果根据手机屏幕宽度和设计图宽度的比例去动态改变根字体大小，就能实现实际屏幕呈现出和设计图一致的效果。

（2）js基础封装：动态计算根字体大小

  • 首先需要定义下设计图尺寸(宽度)和基准值，基准值即1rem等于多少px，设计图尺寸也确定下来，就表示在该尺寸下根字体大小为该基准值。
  • 根据上述rem原理就能得出一个公式：实际屏幕宽度 / 设计图尺寸 = 实际根字体大小 / 基准值
  • 将上述公式调下顺序：要计算的根字体大小值 = 实际屏幕宽度 / 设计图尺寸 * 基准值
  • 示例代码：
var sizeUI = 375 // 定义设计图尺寸
var remBase = 37.5 // 定义基准值
var docEl = document.documentElement // 获取html元素

setRemUnit() // 执行函数

function setRemUnit () {
  var docFontSize = docEl.clientWidth / sizeUI * remBase // 计算得到根字体大小
  docEl.style.fontSize = docFontSize + 'px' // 设置根字体大小
}
  • 如上代码，设计图尺寸设为375是为了方便chrome调试，毕竟chrome调试下iphoneX默认宽度就是375，查看尺寸大小时方便，基准值设为37.5，这样也能适配vant UI；
  • 上述代码要在页面一打开时就加载，然后开发时写元素尺寸就按照375设计图下该元素的px尺寸除以基准值37.5得到的rem值。

（3）js封装优化：重置网页默认大小

  • css中字体样式是可以继承的，元素未设置font-size时字体大小是从父级元素继承，层层网上找，如果找到根元素(html)也没有设置font-size时就取默认字体大小，默认是16px。
  • 在用rem方案时会给根元素设置字体大小，这个值一般都很大，而给body元素设置下字体大小为16px就能实现重置的效果。
  • 只需要在上述封装的代码 setRemUnit 函数里末尾加一行：
document.querySelector('body').style.fontSize = 16 / docFontSize + 'rem'

（4）js封装优化：响应屏幕尺寸的变化

  • 监听到屏幕尺寸改变时重新设置根字体大小
  • 直接上代码：
window.addEventListener('resize', setRemUnit) // 触发示例：屏幕旋转
window.addEventListener('pageshow', function (e) { // 触发示例：有页面缓存功能的浏览器的前进后退
  if (e.persisted) setRemUnit()
})

（5）js封装优化：个别机型rem计算不准的兼容

  • rem方案确实存在个别机型的兼容性问题，常见于华为手机（大骂！！！），个别机型用rem计算出来的尺寸有偏差，导致页面两边留白或有横向滚动，还有些机型在改变手机系统默认字体大小时也会出现类似问题，这也是rem方案被人诟病的点，但其实这一点是可以做兼容处理的。
  • 原因：这种现象从网页里体现出的原因是根字体元素实际字体大小和设置的字体大小不一致，有几px的偏差。
  • 解决方法：根字体元素实际字体大小可以通过getComputedStyle获取到，然后和设置的字体大小进行比较，高了就让设置的字体大小加1，低了就减1，重复执行，直到两者差距值不超过1就认为差不多值合适了。
  • 代码：
var docEl = document.documentElement

function handleRemAdapt () {
  var currentFontSize = parseInt(docEl.style.fontSize)
  var temp = currentFontSize
  for (var i = 0; i < 100; i++) { // 只遍历100次，够用了
    var realFontSize = parseInt(window.getComputedStyle(docEl).fontSize)
    var differ = realFontSize - currentFontSize
    if (Math.abs(differ) >= 1) {
      if (differ > 0) {
        temp--
      } else {
        temp++
      }
      docEl.style.fontSize = temp + 'px'
    } else {
      break
    }
  }
}

（6）完整js封装及项目中引入

  • 完整js代码 flexible.js
;(function (window, document) {
  var sizeUI = 375 // 定义设计图尺寸
  var remBase = 37.5 // 定义基准值
  var docEl = document.documentElement
  var bodyEl = document.querySelector('body')

  setRemUnit()

  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) setRemUnit()
  })

  function setRemUnit () {
    var docFontSize = docEl.clientWidth / sizeUI * remBase
    docEl.style.fontSize = docFontSize + 'px'
    bodyEl.style.fontSize = 16 / docFontSize + 'rem'
    handleRemAdapt()
  }

  function handleRemAdapt () {
    var currentFontSize = parseInt(docEl.style.fontSize)
    var temp = currentFontSize
    for (var i = 0; i < 100; i++) {
      var realFontSize = parseInt(window.getComputedStyle(docEl).fontSize)
      var differ = realFontSize - currentFontSize
      if (Math.abs(differ) >= 1) {
        if (differ > 0) {
          temp--
        } else {
          temp++
        }
        docEl.style.fontSize = temp + 'px'
      } else {
        break
      }
    }
  }
})(window, document)
  • 普通html页面中建议在head标签内引入该js：
<head>
	<script src="./flexible.js"></script>
</head>
  • spa单页面项目中直接在项目入口文件里引入即可：
import './flexible.js'

（7）webpack中配置px自动转rem

对于webpack项目，利用插件可以做到webpack编译打包时自动将px单位转rem，这样开发时只需要写px不用再计算，非常方便。

  • 首先项目中需要先集成插件postcss，vue-cli和create-react-app创建的项目已默认集成可以忽略。
  • 然后再集成插件：postcss-plugin-px2rem 官方地址
  • 安装依赖
npm i postcss-plugin-px2rem -D
  • 然后在postcss配置文件(例如postcss.config.js)里进行配置：
module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-plugin-px2rem': {
      rootValue: 37.5, // 基准值，和flexible.js里的保持一致
      selectorBlackList: ['noRem'],
      minPixelValue: 2
    }
  }
}
  • 需要注意的是，这种方式只能转换样式文件里px单位，比如css、less、vue页面的style标签等，而dom结构里的行内样式(style属性)以及通过js代码动态设置的单位不会自动转换，仍然需要自己手动处理（将px单位处以37.5换算成rem单位即可）。

4、vw方案

如果rem方案使用的得心应手了，再看vw方案就很简单了，vw单位在移动端兼容性已经没问题了，其他方面还需要在项目中实践检验。

（1）原理

vw是视口单位，是视口宽度等分100份后所占的份数，1vw就相当于屏幕宽度的1%，所以使用vw单位在不同屏幕尺寸下能天然的自适应。

（2）使用

vw方案相比rem方案无需封装引入js文件，将设计图尺寸下的元素大小转换为vw就能直接使用，简单很多。

（3）webpack中配置px自动转vw

webpack项目中可以 利用插件进行自动转换，和上述px自动转rem类似。

  • 同样需要依赖postcss，脚手架创建的项目已默认集成postcss可以忽略此条。
  • 然后引入插件：postcss-px-to-viewport 官方地址
  • 安装依赖：
npm i -D postcss-px-to-viewport
  • 配置postcss.config.js:
module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-px-to-viewport': {
	  viewportWidth: 375, // 设计图尺寸
	  minPixelValue: 2
	}
  }
}
  • 同样的，只转换样式文件里的单位，行内样式里及js里的px单位不会自动转换，需手动处理。

相关博文

h5移动端屏幕适配方案（rem、vw）
赏