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

考えられる（そして考えられない）すべてのシナリオに取り組んだ、すぐに使えるフレームワークを使用することをお勧めします。

Bootstrapを見てください。絶えず更新され、改善されている素晴らしいコミュニティがあります。

自分で転がすほど楽しくはないかもしれませんが、間違いなくもっと豊かになります。

幸運を。

追伸 必要に応じて、足場のようにその一部だけを使用して、メニューコンポーネントなどを省略できます。ミックスとマックススタイル。

または、より一般的なものが必要な場合はスケルトンですら。

于 2013-02-07T03:54:51.477 に答える
0

ついに解決策を思いつきました！:)それを押し下げ続けたので、私は使用position:absolute;しなければなりませんでした。.right

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

変更したい点があればコメントしてください。

于 2013-02-07T03:52:05.023 に答える