Looking for tips on responsive design on website

问题

was wondering if anyone would be able to help me figure out a better way to make my site more responsive to people actively changing their browser size. The reason for this, is it will be accessed through the EVE online in game browser, and people resize many times to see the other UI elements on their screen.

Here is the code I am trying to get work: http://jsfiddle.net/yKVq4/42/

and here is my solution:

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;
}
}

As it stands in the fiddle, the design isn't bad, however, since the CSS also affects the image gallery, which can be seen here: www.vutallindustries.com/penultimatum/gallery.html, when resizing, the pictures will overlap the rest of the size, as will text if to much is written in the centerbox. My current solution is as seen in the code above, that when resizing below 600 pixels wide, it hides everything and displays a message asking to resize. I would like to get away from that.

EditL and here is the fiddle for the gallery with gallery code in the CSS: http://jsfiddle.net/yKVq4/117/

回答1:

Finally came up with a solution! :) I had to use position:absolute; on .right because it kept pushing it down.

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

Comment if there is anything you would like to change.

回答2:

I recommend using an out of the box framework that has tackled all the scenarios that you can (and can't) think of.

Have a look at Bootstrap there is a great community continually updating and bettering it.

It might not be as fun as rolling your own, but it will definately be richer.

Good luck.

Ps. You can use just a part of it if you like, like just the scaffolding and leave the menu components and things out. Mix and max style.

or even Skeleton if you want something more generic.

来源：https://stackoverflow.com/questions/14720513/looking-for-tips-on-responsive-design-on-website

标签

html

css

responsive-design