[英]How to Remove White Space
I am designing a responsive web page. 我正在设计一个响应式网页。 Actually what's happening is though i am setting the width of my header and wrapper with the screen size still I guess it is taking more space due to which a horizontal scroll bar appears down the screen and also the position of buttons are varying from display to display though i am taking the screen size px Here is the code
实际上发生了什么,尽管我仍在用屏幕尺寸设置标题和包装器的宽度,但我猜这会占用更多空间,这是因为水平滚动条出现在屏幕下方,而且按钮的位置因显示器而异虽然我正在屏幕尺寸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");
});
I would suggest you to use media queries
, instead of js. 我建议您使用
media queries
,而不是js。 Only if you are trying to make a support of a veeery old browsers, there is a tiny possibility, that js would be needed to make adoptive layout. 仅当您尝试支持老式的浏览器时,才有可能需要js来进行收养式布局。 For every modern browser, just use the
media queries
. 对于每种现代浏览器,只需使用
media queries
。 Basic info you can read on the link : media queries 您可以在链接上阅读的基本信息: 媒体查询
By the way, you can look at popular adoptive css frameworks, like bootstrap , foundation or or others. 顺便说一下,您可以查看流行的过继css框架,例如bootstrap , foundation或其他。 They provide more or less complete adoptivness from the box, and you can customize it for your needs.
他们从包装盒中提供了或多或少的完全采用性,您可以根据需要进行自定义。
Okay, there is a lot of stuff going on here. 好的,这里有很多东西。 On a basic level, you can think of a web frontend as being divided between Content (HTML), Style (CSS), and Animation/Interaction (JavaScript).
从根本上讲,您可以将Web前端划分为内容(HTML),样式(CSS)和动画/交互(JavaScript)。 I'm oversimplifying a bit, as you can do animations in CSS, and JavaScript is becoming much more complex and important, but at a basic level this way of thinking works.
我稍微简化了一点,因为您可以使用CSS制作动画,而JavaScript变得越来越复杂和重要,但是从根本上讲,这种思维方式有效。
So in your HTML file, you should define the content of your page. 因此,在HTML文件中,您应该定义页面的内容。 Then link to a CSS file in which you define the styles and appearance.
然后链接到您在其中定义样式和外观的CSS文件。
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
In your CSS, you can use media queries to define styles based on the size of the window, which will help you to create a responsive site. 在CSS中,您可以使用媒体查询根据窗口的大小定义样式,这将帮助您创建响应式站点。 Media queries are the industry standard for responsive web.
媒体查询是自适应Web的行业标准。
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
If your site gets a bit more complicated, you might want to look into using a front-end CSS framework, like Bootstrap or Foundation . 如果您的站点变得更加复杂,则可能需要考虑使用前端CSS框架,例如Bootstrap或Foundation 。 These are both build from the ground up to support responsive web design and will abstract away a lot of the complexity therein.
这些都是从头开始构建的,以支持响应式Web设计,并且将消除其中的许多复杂性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.