适应于各种屏幕的分辨率的

最新推荐文章于 2021-05-30 20:22:17 发布

心灵的制造商

最新推荐文章于 2021-05-30 20:22:17 发布

阅读量624

点赞数

<html>
<head>
    <title></title>
    <style type="text/css">
    .conent 
    {
        width: 980px;
        height:680px;
        border:1px solid #134579;
    }
    </style>
<script type="text/javascript">
    var marginLeft;
    var marginTop;
    window.onload = function () {
        marginTop = 0;
        marginLeft = 0;
        rePoint();
    }
    window.onresize = function () {
        rePoint();
    }
    function rePoint() {
        var marginTopIndex = parseInt((document.body.clientHeight - 680) / 2);
        var marginLeftIndex = parseInt((document.body.clientWidth - 980) / 2);
        if (marginLeftIndex < 0) {
            marginLeftIndex = 0;
        }
        if (marginTopIndex < 0) {
            marginTopIndex = 0;
        }
        if (marginLeft == marginLeftIndex && marginTop == marginTopIndex) {
            return;
        }
        marginLeft = marginLeftIndex;
        marginTop = marginTopIndex;
        document.getElementById("mainDiv").style.marginLeft = marginLeft + "px";
        document.getElementById("mainDiv").style.marginTop = marginTop + "px";
    }
</script>
</head>
<body>
    <div id="mainDiv" class="conent">
适应于各种屏幕的分辨率的div
 </div>
</body>
</html>

优惠劵

心灵的制造商

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
适应于各种屏幕的分辨率的

.conent { width: 980px; height:680px; border:1px solid #134579; } var marginLeft; var marginTop; window.onload = function () { marginTop = 0;
复制链接

扫一扫