2014-01-17 136 views
1

我有一个网页,在22英寸的显示器上看起来不错,但在笔记本电脑上看起来很糟糕......我想知道是否有可能使所有类型的尺寸都可调整屏幕...我已经tryed在JS表函数,在CSS宽度100%......我需要一些帮助:(继承人小提琴: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(); 
     } 
    } 
+0

我认为这是无关紧要JavaScript,但一招鲜“技术”称为响应式设计的。 –

回答

1

你应该看看怎么样的框架Bootstrap处理这个问题,他们重新调整元素的大小,甚至动态地调整页面的流动以使所有的东西都适合。

http://getbootstrap.com/

特别是调整大小,网格等和移动第一种方法或许对你来说有趣:

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

你会更好使用这样的框架(有很多的替代品也是如此),而不是试图自己重新创建它。

+0

@agconti不用担心,那是一个占位符,而我为他提供了一些链接。 –

+0

没问题。评论删除。链接到媒体查询和流体布局也可能很好。 – agconti

1

这里有一些非常有用的东西是CSS3 Media Queries。它允许您根据查看页面的设备的属性应用不同的样式。因此,您可以根据例如查看该页面的设备的屏幕宽度来应用不同的样式。这是很好的描述如下:

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

相关问题