如何使用rem编写移动端布局_解决办法

目前比较常规的移动端适配方案有百分比适配和rem配置等两种方法,其中,百分比适配因其随着屏幕的大小进行缩放,但字体和一些东西并不会随着屏幕的放大而放大,所以是存在一些弊端的,这个时…

目前比较常规的移动端适配方案有百分比适配和rem配置等两种方法,其中,百分比适配因其随着屏幕的大小进行缩放,但字体和一些东西并不会随着屏幕的放大而放大,所以是存在一些弊端的,这个时候,rem出现了,其基于html根元素进行放大的特性,使得页面中的内容可以随着屏幕的方法而适当放大,非常适合移动端的书写:

适配代码如下:

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
    <script>
        function defaultfont() {
            var sw = $(window).width();
            var pw = 750;
            //var pw = 600;

            var f = 100 * sw / pw;
            if (sw > 767 && sw < 1000) {
                f = 70
            }
            if (sw > 1000 && sw < 1200) {
                f = 100
            }
            $('html').css({
                'fontSize': f + 'px',
                'transtion': '0.35s'
            })
        }
        setTimeout(function () {
                defaultfont()
            },
            100);
        var w_height = $(window).width();
        $(window).resize(function () {
            if ($(window).width() != w_height) {
                setTimeout(function () {
                        defaultfont()
                    },
                    100)
            }
        });
    </script>

作者: huanggr

为您推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注