Question

我有一个在22英寸显示器上看起来很棒的网页，但在笔记本电脑上看起来很糟糕...我想知道是否有可能使其适用于所有类型的屏幕...我已经尝试了表功能js，宽度100％在css ...我需要一些帮助:(这是一个小提琴：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媒体查询。它允许您根据查看页面的设备的属性应用不同的样式。因此，您可以根据查看页面的设备的屏幕宽度应用不同的样式。这里有很好的描述：

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

根据屏幕分辨率自动调整网页大小

2 个答案: