响应式布局 css控制和js控制

最新推荐文章于 2025-06-16 19:02:05 发布

原创最新推荐文章于 2025-06-16 19:02:05 发布 · 2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css

Javascript 专栏收录该内容

5 篇文章

订阅专栏

响应式布局简化了多设备网站开发，通过CSS百分比控制宽度实现适应性，而JS则利用window的可视区变化进行动态调整。本文探讨了如何利用CSS和JavaScript实现页面元素在不同屏幕尺寸下的隐藏与显示。

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

响应式也称自适应，这样就不用开发PC和wap多个网站版本了，同时可以兼容PC，PAD，Phone版本。

CSS控制(宽度要通过百分比进行控制)

/*默认尺寸 width:1920*/
.page-event .content { overflow:hidden; }

.page-event .content .nav { overflow:hidden; margin-top:33px; padding:0 30px; }
.page-event .content .nav ul { display:inline-block; }
.page-event .content .nav ul li { overflow:hidden; height:35px; line-height:35px; font-size:12px; color:#333; margin:10px 10px 0 0; padding:0 24px; border:1px solid #efefef; float:left; cursor:pointer; }
.page-event .content .nav ul li.on { background-color:#333; border-color:#333; color:#fff; }

.page-event .content .list { overflow:hidden; margin-top:42px; padding:0 30px; }
.page-event .content .list ul { overflow:hidden; width:101.5%; }
.page-event .content .list ul li { overflow:hidden; width:33.333%; float:left; padding-right:1.5%; }
.page-event .content .list ul li .img img { width:100%; }
.page-event .content .list ul li .info { overflow:hidden; height:114px; padding:10px 15px 0; }
.page-event .content .list ul li .info .title { overflow:hidden; line-height:20px; max-height:40px; font-size:16px; color:#333; font-weight:bold; margin-top:5px; }
.page-event .content .list ul li .info .title a:hover { text-decoration:underline; }
.page-event .content .list ul li .info .sm { overflow:hidden; height:14px; line-height:14px; font-size:11px; color:#333; margin-top:10px; }
.page-event .content .list ul li .info .sm .time { font-weight:bold; }

.page-event .content .list .more { overflow:hidden; margin-top:30px; }
.page-event .content .list .more a { display:block; width:100%; height:90px; line-height:90px; background-color:#efefef; font-size:12px; color:#b5b5b5; font-weight:bold; text-align:center; }
.page-event .content .list .more a:hover { background-color:#333; }

.page-event .top { display:none; width:54px; height:54px; position:fixed; right:10px; bottom:68px; z-index:99; }
/* 1440 ~ 1920 */
@media(min-width:1440px) {
    .page-event .content .list ul li .info { height:156px; }
    .page-event .content .list ul li .info .title { font-size:18px; margin-top:8px; }
    .page-event .content .list ul li .info .sm { font-size:12px; }
}

/* 640 ~ 1024 */
@media screen and (max-width: 1024px) {
    .page-event .content .md-stepmap { display:none; }
    .page-event .content .nav { width:500%; padding:0 10px; }
    .page-event .content .list { padding:0 10px; }
    .page-event .content .list ul { width:103%; }
    .page-event .content .list ul li { width:50%; padding-right:3%; }
    .page-event .content .list ul li .info .title { font-size:18px; }
    .page-event .content .list ul li .info .sm { font-size:12px; }
    .page-event .content .list .more a { background-color:#333; }
}

/* < 640 */
@media screen and (max-width: 640px) {
    .page-event .content .nav { margin-top:20px; height:38px; }
    .page-event .content .nav ul li { height:28px; line-height:28px; margin-right:10px; padding:0 18px; }
    .page-event .content .list { margin-top:30px; }
    .page-event .content .list ul { width:100%; }
    .page-event .content .list ul li { width:100%; padding-right:0; }
    .page-event .content .list ul li .info { height:100px; }
    .page-event .content .list ul li .info .sm { font-size:13px; margin-top:8px; }
    .page-event .content .list .more { margin-top:20px; }
    .page-event .content .list .more a { height:45px; line-height:45px; }
}

JS控制

    if(jQuery(document).width() < 640) {

    }
    else {

    }
    jQuery(window).scroll(function() {

        if(jQuery(window).width() <= 1024){

            var minHeight = 600;
            var s = jQuery(window).scrollTop();

            if (s > minHeight) {
                jQuery(".js-mgotop").fadeIn(200);
            } else {
                jQuery(".js-mgotop").fadeOut(150);
            }
        }
        else{
            jQuery(".js-mgotop").hide();
        }
    });

    jQuery(window).resize(function() {

        if(jQuery(window).width() > 1024) {

            jQuery(".js-mgotop").hide();
        }

        if(jQuery(document).width() < 640) {

        }
        else {

        }

    });