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

来源：互联网发布：sql安装参数错误编辑：程序博客网时间：2024/05/20 20:17

//框架文件名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>

0 0