美文网首页
移动端屏幕适配

移动端屏幕适配

作者: 給我小鱼干 | 来源:发表于2019-03-01 16:44 被阅读0次
<script>
            (function (doc, win) {
                var docEl = doc.documentElement,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                    recalc = function () {
                        var clientWidth = docEl.clientWidth;
                        if (!clientWidth) return;
                        if (win.orientation == 90 || win.orientation == -90) {
                            return
                        }; //横屏幕阻止计算宽度
                        if (clientWidth >= 750) {
                            docEl.style.fontSize = '100px';
                        } else {
                            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                        }
                    };
                if (!doc.addEventListener) return;
                win.addEventListener(resizeEvt, recalc, false);
                doc.addEventListener('DOMContentLoaded', recalc, false);
            })(document, window);
        </script>
    <style>
      @media screen and (min-width: 750px) {
            html {
                font-size: 100px;
            }
        }

        @media screen and (min-width: 640px) and (max-width: 749px) {
            html {
                font-size: 85px;
            }
        }

        @media screen and (min-width: 414px) and (max-width: 639px) {
            html {
                font-size: 56px;
            }
        }

        @media screen and (min-width: 375px) and (max-width: 413px) {
            html {
                font-size: 50px;
            }
        }

        @media screen and (min-width: 320px) and (max-width: 374px) {
            html {
                font-size: 42px;
            }
        }
    </style>

相关文章

网友评论

      本文标题:移动端屏幕适配

      本文链接:https://www.haomeiwen.com/subject/pdtjuqtx.html