1

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

4

2 回答 2

0

终于想出了一个解决办法！:) 我不得不继续使用position:absolute;，.right因为它一直向下推。

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

如果您有任何想要更改的内容，请发表评论。

于 2013-02-07T03:52:05.023 回答
0

我建议使用一个开箱即用的框架，该框架已经解决了您可以（和不能）想到的所有场景。

看看Bootstrap，有一个很棒的社区在不断更新和改进它。

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

祝你好运。

附言。如果你愿意，你可以只使用它的一部分，比如只使用脚手架，而不要使用菜单组件和其他东西。混合和最大风格。

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

于 2013-02-07T03:54:51.477 回答