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

响应式也称自适应，这样就不用开发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 {        }    });

window是可视区，取决于当前的屏幕，所以是窗口大小变了就变了。。但是document,body都是当前文档和body的大小，所以不管显示窗口多大，实际尺寸不变。
通过上面的判断就可以根据需要隐藏或者显示具体的元素了。