使网站适合屏幕尺寸

Question

so I have been working on a website. Now I am working on making it fit all screen sizes, and I have a problem. Here is a example:

@media only screen and (min-width : 1366px) {
    #wrapper {
        width: 1400px;
        height: 750px;
        position: absolute;
    }
}

Now the above will display the screen size as 1400 pixels if the screen size is at least 1366. Yet if the screen size is 1400 pixels, and your screen only happens to be 1366 pixels you are going to have to scroll side to side. That is my issue, but I have a idea on how to solve this. I would like to center the 1366 pixels of content in the middle, and then if the screen size is bigger the left over pixels will be equally divided on the sides. Example:

My screen size is 1500 pixels. Minimum screen size is 1200 pixel. Then 150 pixels will be added to each side of the 1200 pixel content (sense there are 300 pixels left over).

Now on the sides where there are no content (because the pixels are bigger) I want there to be a background color. So simply how would I achieve this? If this does not make sense please just post a comment and I will try to make this more clear. Thank You :)

EDIT: People are asking, why can you not just do width:100%. That would not work because if you shrink the screen size it messes up everything.

Answer 1

Welcome to SO. You're right, your question is over complicated for the question you're asking. What you're essentially asking is 'how to center a div'.

#wrapper {
   margin: 0 auto;
}

For the background, you can do:

body {
   background-color:#000;
}

Edit for your first issue: #wrapper {overflow:hidden} to remove the scroll bars, although this would only really be applicable for images, otherwise you could go for 100% on the width. Depending on your design you might benefit from reading up on responsive frameworks.

Answer 2

Try this:

CSS

@media only screen and (min-width : 1366px) {
     #wrapper {
          width: 100%;
          height: 750px;
          position: absolute;
     }
}

Answer 3

I am not sure what you are asking for. I think this is it:

@media only screen and (min-width : 1366px) {
    #wrapper {
        width: 1400px;
        height: 750px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

I think @SajadLfc answered your question but still not sure because he got downvote :/

Answer 4

To get screen width and height

use this,

width = screen.width;
height = screen.height;

and

width = window.innerwidth;
height = window.innerheight;

Hope this helps.