移动端开发技巧(二)——四种移动端适配方案

2019-07-07 本文已影响142人临安linan

完整移动端开发笔记，请戳https://github.com/zenglinan/Mobile-note
目录：

viewport适配
vw适配
rem适配
flex弹性盒

1. viewport适配

流程

按照设计稿上标注的尺寸进行开发
在页面刚开始渲染的时候设置meta，将渲染的页面的宽度设为设计稿的宽度
将页面整体缩放，缩放比例为当前屏幕的独立像素宽度/设计稿宽度

// 放在页面头部
<script>
    const WIDTH = 750   // 设计稿宽度
    const mobileAdapter = () => {
      let scale = screen.width/WIDTH  // 缩放比
      let content = `width=${WIDTH}, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}`
      let meta = document.querySelector('meta[name=viewport]')
      if(!meta) {
        meta = document.createElement('meta')
        meta.setAttribute('name', 'viewport')
        document.head.appendChild(meta)
      } 
      meta.setAttribute('content', content)
    }
    mobileAdapter()
    window.onorientationchange = mobileAdapter  // 监听屏幕旋转
  </script>

优点：

方便开发，不用计算，一切元素的宽高按设计稿来即可

缺点：

边框等不需要缩放的元素，也会跟着缩放

2. vw适配

为了解决方案1(viewport适配)的缺点(无法对部分缩放，部分不缩放)，出现了vw适配

流程

将设计稿(假设750px)上需要适配的尺寸转换成vw，比如页面元素字体标注的大小是32px，换成vw为 32/(750/100) vw
对于需要等比缩放的元素，CSS使用转换后的单位
对于不需要缩放的元素，比如边框阴影，使用固定单位px
(1) viewport设置 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">

把layout viewport 宽度设置为设备宽度，不需要缩放
(2) 用js定义css的自定义属性--width，表示每vw对应的像素数。
(3) 根据设计稿标注设置样式，比如标注稿里元素宽度为20px。这里设置 calc(20vw / var(--width))

// HTML
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>viewport缩放实战</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
  <script>
    const WIDTH = 750
    document.documentElement.style.setProperty('--width', (WIDTH/100));
  </script>
</head>

// CSS
header {
  font-size: calc(28vw / var(--width));
}

优点

可以对需要缩放的元素进行缩放，保留不需缩放的元素

缺点

书写复杂，需要用calc计算

3. rem适配

为了改良vw适配书写复杂的缺点，出现了rem适配。

假设设计稿宽度为750px，手机端宽度为320px，上面字体标注为32px，则字体在手机端应该设为32 * (320/750) px。

将1rem设为 320/750，则字体大小可直接表示为32rem。

但是浏览器字体大小有限制，不能小于12px。故将html的font-size设为 (移动端设备宽度/设计稿宽度)x100

流程

拿到设计稿（假设设计稿尺寸为750px，设计稿的元素标是基于此宽度标注）
对设计稿的标注进行转换
对于需要等比缩放的元素，CSS使用转换后的单位
对于不需要缩放的元素，比如边框阴影，使用固定单位px

// HTML
<head>
  <meta charset="utf-8">
  <title> 动态rem缩放实战</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
  <script>
    const WIDTH = 750  //设计稿尺寸
    const setView = () => {
      console.log(screen.width)
      document.documentElement.style.fontSize = (100*screen.width/WIDTH) + 'px'
    }
    window.onorientationchange = setView
    setView()
  </script>
</head>

// CSS
body{
  font-size: .32rem;  // 设计稿上宽度为32px
}

优点：书写简单可见

4. flex弹性盒

对于不需要缩放的元素，也可以采用flex布局延伸
eg.左边头像，右边文本，文本可以进行自适应。