Как удалить белое пространство

Question

Я разрабатываю отзывчивую веб-страницу. Фактически, что происходит, хотя я устанавливаю ширину моего заголовка и обертки с размером экрана, тем не менее я предполагаю, что он занимает больше места, из-за которого на экране появляется горизонтальная полоса прокрутки, а также положение кнопок меняется от дисплея к дисплею хотя я беру экран размер точек Вот код

$(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

Я хотел бы предложить вам использовать media queries вместо JS. Только если вы пытаетесь сделать поддержку старых браузеров, есть крошечная возможность, что js понадобится для принятия адаптивного макета. Для каждого современного браузера просто используйте media queries. Основная информация, которую вы можете прочитать по ссылке: media queries

Кстати, вы можете посмотреть популярные приемные рамки css, например bootstrap, foundation или другие. Они обеспечивают более или менее полную удобочитаемость из коробки, и вы можете настроить ее для своих нужд.

Answer 2

Хорошо, здесь много чего происходит. На базовом уровне вы можете думать о том, что веб-интерфейс делится на контент (HTML), стиль (CSS) и анимацию/взаимодействие (JavaScript). Я немного упрощаю, так как вы можете делать анимации в CSS, а JavaScript становится намного более сложным и важным, но на базовом уровне этот способ мышления работает.

Итак, в вашем файле HTML вы должны определить содержимое своей страницы. Затем ссылку на файл CSS, в котором вы определяете стили и внешний вид.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link

В вашем CSS, вы можете использовать медиа-запросы, чтобы определить стили, основанные на размер окна, который поможет вам создать адаптивный сайт. Медиа-запросы являются отраслевым стандартом для гибкой сети.

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Если ваш сайт становится немного более сложным, вы можете посмотреть в использовании рамки CSS фронтального, как Bootstrap или Foundation. Они оба строят с нуля, чтобы поддерживать отзывчивый веб-дизайн, и отвлекут большую часть сложности.