移动端-003-移动端适配方案

移动端适配方案

viewport 缩放适配

假设你做移动端，公司UI给了你一个750px宽的 设计稿

你直接按照标注写样式，如果只关注iphone6 就只需要这样即可

1
2
iphone的设备独立像素为 375 刚好是 750设计稿的一半
<meta name="viewport" content="width=750, initial-scale=0.5"

改善

我们不可能只处理 iphone6，因为还有 ipad，iphone5,android呢

所以需要动态设置缩放比例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
  <script>
    const WIDTH = 750;
    let mobileAdapter = ()=>{
      let scale = screen.width/WIDTH
      let content = `width=${WIDTH}, user-scalable=no, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}`
      let meta = document.querySelector('meta[name=viewport]');
      if(!meta){
        meta = document.creatElement('meta')
        meta.setAttribute('name',viewport)
        document.head.appendChild(meta)
      }
      meta.setAttribute('content',content)
    }
    mobileAdapter()
    // 当屏幕翻转的时候再次执行这个函数
    window.onorientationchange = mobileAdapter
  </script>
  <style>
    .btn {
      background:red;
      width:98px
    }
    .btn2{
      background:red;
      width:100%;
    }
  </style>
  
</head>
<body>
  <div class="btn">98px</div>
  <hr>
  <div class="btn2">100%</div>
</body>
</html>

缺陷

  • 边框线可能在大屏幕会变粗

vw适配方案

开发流程

1、拿到设计稿（假设为750px）

2、开始开发，对设计稿的标注进行转换，把px换成vw。比如页面元素字体标注的大小是32px，换成vw为 (100/750)*32 vw

3、对于需要等比缩放的元素，CSS使用转换后的单位

4、对于不需要缩放的元素，比如边框阴影，使用固定单位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，对应的是把设计稿分成100份，每份的像素数。

3、根据设计稿标注设置样式， 比如标注稿里元素宽度为20px。这这里设置 calc(20px * var(–width))

4、对于不需要等比缩放的元素，比如边框，可以直接使用固定单位px即可。比如border-bottom: 1px solid #ccc

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <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', (100/WIDTH));
  </script>
</head>
<body>
  <header>
    <span class="active" target="hot">热门</span>
    <span target="focus">关注</span>
  </header>
  <style>
    :root {
      --color: red; 
    }
    body, figure {
      margin: 0;
    }
    body {
      color: #fff;
      background: #888;
      background-size: cover;
      min-height: 100vh;
    }
    header {
      font-size: calc(28vw * var(--width));
      display: flex;
      padding: 0 calc(20vw * var(--width));
      text-align: center;
    }
    header > span {
      flex: 1;
      line-height: calc(84vw * var(--width));
      color: rgba(255, 255, 255, 0.3);
    }
    header > span.active {
      color: #fff;
      border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    }
  </style>
</body>
</html>

REM方式

代码分析

1、viewport设置 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"> 。把layout viewport 宽度设置为设备宽度，不需要缩放

2、用js定义html的fontSize。假设设计稿的宽度和屏幕宽度相同，我们设置html的fontSize为100px，对应设计稿的20px即为0.2rem。若设计稿的尺寸和屏幕尺寸不同，那让html的fontSize为 100*屏幕宽度/设计稿宽度，此时设计稿中的20px仍然对应0.2rem。

3、对于不需要等比缩放的元素，比如边框，可以直接使用固定单位px即可。比如border-bottom: 1px solid #ccc

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <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>
<body>
  <header>
    <span class="active" target="hot">热门</span>
    <span target="focus">关注</span>
  </header>
  <style>
    }
    html {
      /*font-size: 100 * window.innerWidth / 750*/
    }
    body, figure {
      margin: 0;
    }
    body {
      color: #fff;
      background: #888;
      background-size: cover;
      min-height: 100vh;
    }
    header {
      font-size: .28rem;
      display: flex;
      padding: 0 .20rem;
      text-align: center;
    }
    header > span {
      flex: 1;
      line-height: .80rem;
      color: rgba(255, 255, 255, 0.3);
    }
    header > span.active {
      color: #fff;
      border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    }
  </style>
</body>
</html>

弹性盒适配方案

  • 不需要等比缩放，页面元素使用固定单位。使用弹性盒(flex)做布局，可结合媒体查询调整文字大小。

针对上面的适配方案，都是等比例缩小

但是某些场景 一段文字介绍 在手机到ipad上我们不需要变大，字体还是跟手机上一样即可

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jirengu.com</title>
    <meta name="viewport" content="width=device-width">
  </head>
  <body>
    <section>
      <div class="img"></div>
      <div class="detail">
        <h2>aaa</h2>
        <p>aaaaaa</p>
      </div>
    </section>
    <section>
      <div class="img"></div>
      <div class="detail">
        <h2>bbb</h2>
        <p>bbbbbbb</p>
      </div>
    </section>
    <section>
      <div class="img"></div>
      <div class="detail">
        <h2>ccc</h2>
        <p>cccccccc</p>
      </div>
    </section>

    <style>

      section {
        display: flex;
        padding: 10px 0;
        margin: 10px;
        border-bottom: 1px solid #ccc;
        background: #fff;
      }

      section > .img {
        background:red;
        width: 60px;
        height: 60px;
        border-radius: 50%;
      }

      section .detail {
        margin-left: 10px;
        flex: 1;
      }

      section .detail h2 {
        font-size: 20px;
        margin-top: 10px;
      }

      section .detail p {
        font-size: 14px;
        color: #676767;
      }

    </style>
  </body>
</html>