国瑞前端
当前位置: Html5+Css3 > 如何使用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>

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

赞(20) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"如何使用rem编写移动端布局_解决办法"

最新评论

    暂无留言哦~~

博客简介

国瑞个人博客: https://www.huanggr.cn/,我们关注Web前端开发技术,web前端开发,移动前端开发,前端资讯,同时分享前端资源和工具等,期待你的参与,了解更多..

博主独立研发主题:

广告

广告

广告

广告

精彩评论

广告

站点统计

  • 文章总数: 334 篇
  • 草稿数目: 86 篇
  • 分类数目: 28 个
  • 独立页面: 5 个
  • 评论总数: 108 条
  • 链接总数: 10 个
  • 标签总数: 111 个
  • 注册用户: 176 人
  • 访问总量: 8,677,462 次
  • 最近更新: 2021年7月21日
服务热线:
 

 QQ在线交流

 旺旺在线