关于移动端不同分辨率的处理办法

最新推荐文章于 2025-01-10 23:36:57 发布

原创最新推荐文章于 2025-01-10 23:36:57 发布 · 732 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

4 篇文章

订阅专栏

WebApp

1 篇文章

订阅专栏

本文介绍了如何通过设置浏览器视窗、使用相对单位（如rem或em）替代像素单位，以及应用媒体查询来实现网页在不同尺寸屏幕上的自适应布局。文中提供了一个具体的JavaScript函数用于动态调整根元素的字体大小。

1.标明浏览器视窗

    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

2.使用rem 或者em而不使用px

        function auto(){
            var width = $('body').width();
            var font_size = 0.8+'rem';//设置默认字体大小
            //var font_size2 = (width/320)*625+'%';//设置根节点字体大小 ps:默认根节点font-size:16*6.25 =100px
            var font_size2 = (width/320)*20+'px';//设置根节点字体大小 ps:默认根节点20px
            if (width>414) {
                font_size2= (414/320)*20+'px';
            }
            $('body').css('font-size',font_size);
            $('html').css('font-size',font_size2);
        }     
        auto();
        window.onorientationchange = function() {
            auto();
        };
        window.onresize = function(){
            auto();
        };

3.媒体查询在使用 bootstrap 等样式标准下一般已经帮我们做了或者使用以下代码进行根font-size的设置