jquery - 如何删除空白

Question

我正在设计一个响应式网页。实际上发生的事情是虽然我设置了我的标题和包装器的宽度与屏幕尺寸我仍然认为它占用了更多空间由于水平滚动条出现在屏幕下方并且按钮的位置因显示器而异虽然我采用的是屏幕尺寸 px这是代码

$(document).ready(function(){
    var a=window.screen.availWidth;
    var b=(0.20 * window.screen.availHeight);
    var c=(0.60 * window.screen.availHeight);
 $("#header").css("background-color","#009acd");
 $("#header").css("height",b);
 $("#header").css("width",a);
 $("#header").css("position","relative");

 $("#wrapper").css("background-color","#FFFFFF");
 $("#wrapper").css("width",a);
 $("#wrapper").css("height",c);
 $("#wrapper").css("position","relative");

 $("#logo1").css("position", "absolute");
 $('#logo1').css("top","5%");

 $('#d11').css("position","absolute");
 $('#d11').css("top","75px");
 $('#d11').css("left","310px");
 $('#d11').css("color","#FFFFFF");

 $('#marquee').css("position","absolute");
 $('#marquee').css("top","-15px");
 $('#marquee').css("left","300px");
 $('#marquee').css("color","#FFFFFF");

 $('h1').css("color","#FFFFFF");
 $('h3').css("position","absolute");
 $('h3').css("top","90px");
 $('h3').css("left","1000px");
 $('h3').css("color","#FFFFFF");
 $('h2').css("position","absolute");
 $('h2').css("top","60px");
 $('h2').css("left","1075px");
 $('h2').css("color","#FFFFFF");

/* $('#d12').css("position","absolute");
 $('#d12').css("top","65px");
 $('#d12').css("left","950px");
 $('#d12').css("color","#FFFFFF");*/

 $('#css3menu1').css("position", "absolute");
 $('#css3menu1').css("bottom","17px");
 $('#css3menu1').css("left","310px");

 $('#videos').css("position", "absolute");
 $('#videos').css("top","0px");
 $('#videos').css("left","22px");

 $('#studymaterial1').css("position", "absolute");
 $('#studymaterial1').css("top","148px");
 $('#studymaterial1').css("left","32px");

 $('#downloads').css("position", "absolute");
 $('#downloads').css("top","315px");
 $('#downloads').css("left","22px");

 $('#wowslider-container1').css("left","233px");
 $('#wowslider-container1').css("top","1000px");

 $('.formoid-solid-blue').css("position","absolute");
 $('.formoid-solid-blue').css("left","912px");
 $('.formoid-solid-blue').css("top","12px");


});

Answer 1

我建议您使用媒体查询，而不是 js。只有当你试图支持一个非常旧的浏览器时，才有可能需要 js 来进行采用性布局。对于每个现代浏览器，只需使用媒体查询。您可以在链接上阅读基本信息:media queries

顺便说一下，你可以看看流行的采用性 css 框架，比如 bootstrap , foundation 或或其他人。它们或多或少地提供了开箱即用的完全采用性，您可以根据自己的需要对其进行自定义。