在網站上尋求關於響應式設計的提示

想知道是否有人能夠幫助我找到一種更好的方式，讓我的網站更積極地響應主動更改瀏覽器大小的人。其原因是，它將通過遊戲瀏覽器中的EVE在線訪問，並且人們多次調整大小以查看其屏幕上的其他UI元素。在網站上尋求關於響應式設計的提示

這裏是我試圖讓工作代碼：http://jsfiddle.net/yKVq4/42/

，這裏是我的解決方案：

CSS：

* { 
margin:0; 
padding:0; 
-moz-box-sizing:border-box; 
} 
body { 
background:#000000 url(http://www.vutallindustries.com/websitefiles/welcomepage.jpg) no-repeat fixed; 
/*Combined all the values into one*/ 
color:#000000; 
margin: 0px; 
padding: 0px; 
} 
/* displays when browser to small */ 
.centerbox { 
position:fixed; 
top: 0px; 
border: 1px solid black; 
opacity:0.6; 
filter:alpha(opacity=60); 
background-color:#FFFFFF; 
z-index:-1; 
height:100%; 
text-align: center; 
font-size: 250%; 
} 
/* Left and right side text boxes*/ 
.menu { 
margin-top:-4px; 
min-width:100%; 
min-height: 100%; 
background-color:#FFFFFF; 
border: 1px solid black; 
text-align:left; 
opacity:0.6; 
filter:alpha(opacity=60); 
} 
/* Left side link styles */ 
.menu li a { 
text-decoration:none; 
color:red; 
display:block; 
} 
.menu li a:hover { 
text-decoration:underline; 
} 
.menu li { 
padding:2px 0; 
text-align:center; 
} 
/* Alligns to the right */ 
.right { 
width:128px; 
float:right; 
} 
/* Official EVE news via RSS */ 
.news { 
margin-top:-4px; 
background-color:#FFFFFF; 
border: 1px solid black; 
text-align:left; 
opacity:0.6; 
filter:alpha(opacity=60); 
} 
/* Middle text box styling */ 
.content { 
text-align: center; 
} 
/* alligns center box to center */ 
.centerbox-outer { 
position:absolute; 
border: 1px solid black; 
opacity:0.6; 
filter:alpha(opacity=60); 
background-color:#FFFFFF; 
} 
/* Image Boxes for Gallery */ 
div.img { 
margin:2px; 
border:1px solid #0000ff; 
height:auto; 
width:auto; 
float:left; 
text-align:center; 
display:inline; 
} 
div.desc { 
text-align:center; 
font-weight:normal; 
} 
@media (min-width:600px) { 
.centerbox-outer { 
    top:129px; 
    right:136px; 
    left:136px; 
} 
} 
@media (min-width:600px) { 
.menu-contain { 
    float:left; 
    width:128px; 
} 
.right { 
    width:128px; 
    float:right: 
} 
} 
@media (max-width:599px) { 
.menu-contain, .right, .centerbox-outer { 
    display:none; 
} 
} 
@media (min-width:600px) { 
.centerbox { 
    display:none; 
} 
}

由於它矗立在小提琴，設計ISN」不過，因爲CSS還會影響圖片庫，這可以在這裏看到：www.vutallindustries.com/penultimatum/gallery.html，當調整大小時，圖片將重疊其餘的大小，如果將文本中心盒裏寫的很多。我目前的解決方案如上面的代碼所示，當在600像素寬度以下調整大小時，它隱藏所有內容並顯示要求調整大小的消息。我想擺脫這一點。

EditL，這裏是在CSS與庫代碼庫中的小提琴：http://jsfiddle.net/yKVq4/117/

來源

2013-02-06 Thomas Stavlo

你可以將圖像庫添加到小提琴嗎？ –

你不需要重新聲明@media（min-width：600px）這麼多次。在文件中的一個聲明將做 –

啊，修復了在我自己的公共構建網站。謝謝你的收穫！ –