【插件】自适应布局JQuery插件，rem布局——和派孔明

最新推荐文章于 2025-01-20 09:09:41 发布

xyphf_和派孔明

最新推荐文章于 2025-01-20 09:09:41 发布

阅读量3.2k

点赞数

分类专栏： DOM&BOM操作兼容性解决 JQ插件 Java全栈之路文章标签： jquery插件

本文链接：https://blog.youkuaiyun.com/xyphf/article/details/51723316

版权

DOM&BOM操作同时被 3 个专栏收录

64 篇文章

订阅专栏

Java全栈之路

55 篇文章

订阅专栏

兼容性解决

16 篇文章

订阅专栏

//框架文件名Pandora.AutoSize.js
(function($) {
    $.fn.extend({
        AutoSize: function() {
            var element = $(this);
            auto();
            function auto() {
                var width = $(window).width(),
                    height = $(window).height();
                $("html").css("font-size", width / 15);
                $(element).width(width).height(height);
            };
            $(window).resize(auto);
        }
    });
})(jQuery);

//用法
引入<script src="jquery-1.4.2.min.js"></script>
<script src="Pandora.AutoSize.js"></script>

//调用插件
<script>
$(function(){
    $("body").AutoSize();
    })
</script>


//640/15=42.66666666666667
//px换算公式为像素除以42.66666666666667=rem
//例如:width:200px=200/42.66=4.688232536333802rem;

//demo案例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<style>
/*rem换算前*/
/*
*{margin:0;padding: 0;list-style:none;}
.div1{width:595px;height:30px;margin:0 auto;}
.div1 ul li{float:left;height:30px;border-left:1px solid #fff;text-align:center;background:#ccc;line-height:30px;font-size:16px;}
.div1 ul li a{text-decoration:none;color:#fff;display:block;padding:0px 43px;}
.div1 ul li a:hover{background:#666;}
*/

/*rem换算后*/
*{margin:0;padding: 0;list-style:none;}
.div1{width:13.94749179559306rem;height:0.7032348804500703rem;margin:0 auto;}
.div1 ul li{float:left;height:0.7032348804500703rem;border-left:1px solid #fff;text-align:center;background:#ccc;line-height:0.7032348804500703rem;font-size:0.7032348804500703rem;}
.div1 ul li a{text-decoration:none;color:#fff;display:block;padding:0px 1.007969995311767rem;}
.div1 ul li a:hover{background:#666;}
</style>
<script src="jquery-1.4.2.min.js"></script>
<script src="Pandora.AutoSize.min.js"></script>
<script>
$(function(){
    $("body").AutoSize();
    })
</script>
<title>demo</title>
</head>
<body style="margin:0; padding:0;">
<div class="div1">
    <ul>
        <li><a href="javascript:;">首页</a></li>
        <li><a href="javascript:;">介绍</a></li>
        <li><a href="javascript:;">中心</a></li>
        <li><a href="javascript:;">关于</a></li>
    </ul>
</div>
</body>
</html>