Question

想知道是否有人能够帮助我找到一种更好的方法来让我的网站对主动更改浏览器大小的人更敏感。这样做的原因是，它将通过游戏浏览器中的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;
}
}

因为它在小提琴中，设计并不坏，但是，因为CSS也会影响图像库，这可以在这里看到：www.vutallindustries.com/penultimatum/gallery.html，当调整大小时，图片将与大小的其余部分重叠，如果在中心框中写入很多文本也会重叠。我目前的解决方案如上面的代码所示，当调整宽度低于600像素时，它会隐藏所有内容并显示要求调整大小的消息。我想摆脱它。

EditL，这里是CSS中包含图库代码的图库的小提琴：http://jsfiddle.net/yKVq4/117/

Answer 1

终于想出了一个解决方案！ :)我必须在position:absolute;上使用.right，因为它一直在推低它。

http://jsfiddle.net/yKVq4/121/

评论是否有任何想要改变的内容。

Answer 2

我建议使用开箱即用的框架来解决您可以（并且不能）想到的所有场景。

看看Bootstrap有一个伟大的社区不断更新和改进它。

它可能没有滚动自己那么有趣，但肯定会更富有。

祝你好运。

聚苯乙烯。如果你愿意，你可以只使用它的一部分，比如脚手架，并保留菜单组件和东西。混合和最大风格。

甚至Skeleton如果你想要更通用的东西。

在网站上寻找有关响应式设计的提示

2 个答案: