auto resizing web-страница по разрешению экрана

Question

У меня есть веб-страница, которая отлично смотрится на 22-дюймовом мониторе, но на ноутбуке выглядит ужасно ... Я хотел бы знать, есть ли возможность сделать его изменяемым по размеру для всех типов экранов ... Я судимое табличную функцию в JS, ширина 100% в CSS ... Я требуется помощь :(Heres огурчик: http://jsfiddle.net/ygaw2/43/ и код:

function submit() 
{ 
    var dropspot_elements = document.getElementById("dropspot").children; 
    var dropspot_stringOfElementIDs =[]; 

    for(var i = 0; i < dropspot_elements.length; i++) 
    { 
     dropspot_stringOfElementIDs.push(dropspot_elements[i].id); 
    } 

    if(dropspot_stringOfElementIDs.join("")===document.getElementById("container").children[imgNumber-1].id ) 
    {  
     if(imgNumber < 5)     
       alert('CORECT! Puteți trece la secvența următoare.'); 
       else 
       alert('Felicitări,ați ghicit toate răspunsurile.Jocul a luat sfârșit!'); 
       levelDone = true;  
    } 
    else 
    { 
       if(dropspot_stringOfElementIDs.length===0){ 
        alert('Nu ați incercat nici un răspuns.Trageți litere pentru a forma cuvântul ce reprezintă imaginea.'); 
       } 
       else 
       alert('GRESIT! Încercați din nou.'); 
       $("#dropspot").empty(); 
     } 
    } 

Answer 1

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

http://getbootstrap.com/

В частности, изменение размеров, гриддинг и т.д., и мобильной первый подход может быть интересен для вас:

http://getbootstrap.com/css/#overview

Вы будете лучше использовать такую ​​структуру, как это (есть много альтернатив тоже), а не пытаясь воссоздать его самостоятельно.

Answer 2

Что-то очень полезно здесь - это CSS3 Media Queries. Он позволяет применять разные стили на основе свойств устройства, просматривающего страницу. Таким образом, вы можете применять разные стили на основе, например, ширины экрана устройства, просматривающего страницу. Это хорошо описано здесь:

http://webdesignerwall.com/tutorials/css3-media-queries