[原]移动端响应式设计

发表于 |
  1. 淘宝固定html标签font-size模式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="" />
</head>

<body>
    <div style="width:2.666666666666667rem;height:2.666666666666667rem;background:red">

    </div>
    <script>
        var scale = 1 / window.devicePixelRatio;
        console.log(scale)
        document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=device-width,initial-scale=' + scale + ',minimum-scale=' + scale + ',user-scalable=no');
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
    </script>
</body>

</html>

淘宝的方式：
设计图是按照iphone6来的 所以 1rem = 750/10 = 75px
html font-size = 设计图/10 = px
计算的值为设计图的大小/font-size = rem
例如width = 200px with=200/75 rem = 2.66666667rem

  1. 动态设置font-size模式（网易）
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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-sacle=1,user-scalable=no" />
    <style>
        body {
            margin: 0;
            padding: 0
        }

        .box {
            width: 2rem;
            height: 2rem;
            background: red
        }
    </style>
</head>

<body>

    <div class="box">

    </div>
    <script>
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px'
    </script>
</body>

</html>

7.5的值为设计图/100得到的结果（这里为iphone6）

以上2中文字字体大小都不能换算成rem做单位，而是使用媒体查询来进行动态设置，网易代码如下

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
@media screen and (max-width:321px){
    body{
        font-size : 16px
    }
}

@media screen and (min-width:321px) and (max-width:400px){
    body{
        font-size:17px
    }
}

@media screen and (max-widht:400){
    body{
        font-size:19px
    }
}

@media screen and (max-width:321px){
    header,footer{
        font-size : 16px
    }
}

@media screen and (min-width:321px) and (max-width:400px){
    header,footer{
        font-size:17px
    }
}

@media screen and (max-widht:400){
    header,footer{
        font-size:19px
    }
}

如果对您有所帮助或者对博主有更多的话说，欢迎你去我的GitHub留下一个您的start和issues

前往LEE的github给他一个Start鼓励一下吧

原创转载请标注出处：https://leehongqiang.github.io