jQuery设置div的自适应布局

最新推荐文章于 2024-08-17 11:38:42 发布

转载最新推荐文章于 2024-08-17 11:38:42 发布 · 315 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/minozMin/p/8335057.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用HTML, CSS和JavaScript实现的自适应布局方案。该方案通过绝对定位将指定元素居中显示，并随着窗口大小的变化而调整位置。适用于需要创建响应式用户界面的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、HTML代码：

<div class="ui-wraper" id="Wraper">
</div>

二、CSS代码：

html {
    width: 100%;
    height: 100%;
    min-height: 350px;    /*html最小高度和要自适应模块的高度一致*/
    min-width: 1000px;    /*最小宽度为需要自适应的最小宽度*/
}

body {
    width: 100%;
    height: 100%;
}

.ui-wraper {
    position: absolute;
    width: 100%;
    height: 350px;
    margin: 0 auto;
    background: #76C0F1;
}

三、JS代码：

var uiWrapPos = {
    uiWrapId: '#Wraper',
    defaultTop: 20,    //设置默认top值
    init: function() {
        var self = this;
        this.setFormPos();
        $(window).resize(function(){
            self.setFormPos();
        });
    },
    setFormPos: function() {
        var uiWrap = $(this.uiWrapId),
             uiWrapWidth = uiWrap.width(),    //获取自适应div宽度
             uiWrapHeight = uiWrap.height(),    //获取自适应div高度
             winWidth = $('html').width(),    //获取屏幕宽度
             winHeight = $('html')..height(),    //获取屏幕高度
             top = (winHeight - uiWrapHeight) / 2 - this.defaultTop > 0 ? (winHeight - uiWrapHeight) / 2 - this.defaultTop : (winHeight - uiWrapHeight) / 2,    //设置top值
             left = (winWidth - uiWrapWidth) / 2;   //设置left值
         uiWrap.css({ 'top': top, 'left': left })
    }
}

$(function(){
    // 位置重设
    uiWrapPos.init();
});