国瑞前端
立即登录 马上注册
当前位置: Html5+Css3 > 如何使用rem编写移动端布局_解决办法

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

2019-08-09 分类：Html5+Css3 作者：huanggr 阅读（1809）

目前比较常规的移动端适配方案有百分比适配和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前端开发,移动前端开发，前端资讯，同时分享前端资源和工具等，期待你的参与,了解更多..

博主独立研发主题：

最近更新

热门标签

精彩评论

站点统计

  • 文章总数： 333 篇
  • 草稿数目： 86 篇
  • 分类数目： 28 个
  • 独立页面： 5 个
  • 评论总数： 168 条
  • 链接总数： 10 个
  • 标签总数： 111 个
  • 注册用户： 148 人
  • 访问总量： 8,657,447 次
  • 最近更新： 2021年1月14日