Geek asks and answers

HTML basics: what is currently a good viewport size?

There are many different opinions about this, but when designing a web page, what window size or viewport size should you serve? Now it’s assumed that you want to serve the general public (which means that if you create a gaming site, the people who ride there will not have 800x600 screens ...)

Also, is it better to leave the main containing div in automatic size (so that it stretches to fit the screen, assuming you don’t have any fixed elements inside that you don’t want to stretch), or are you fixing your width? I have developed several websites, but I'm still not sure which is best in 2012.

+5
source share
5 answers

See more on responsive web design. The main summary of this: you must customize your css using media queries and customize your styles to accommodate various sizes. You should also design with a more flexible layout, using more %and less px.

I think these are fairly common media queries for responsive design:

/* Landscape phones and down */
@media (max-width: 480px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Large desktop */
@media (min-width: 1200px) { ... }

Add this to the top of your html:

<meta name="viewport" content="width=device-width" />

If you want to have separate stylesheets so that your user does not load a single monster stylesheet, do the following:

`<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="/assets/css/small-device.css" />`
+4
source

imakeitpretty ... ... , ... ... .

/* break point 01 ----------- */
@media only screen 
and (min-width : *size-it-gets-ugly*px) {
/* Styles */
}

/* break point 02 ----------- */
@media only screen 
and (min-width : *size-it-gets-ugly*px) {
/* Styles */
}

/* break point 03 ----------- */
@media only screen 
and (min-width : *size-it-gets-ugly*px) {
/* Styles */
}
+2

, 940 + - min-width: 780px 480px.

+1

- , .
j08691 , - 2012 . , , . .

- . , , .

+1

960px was for a while the standard standard width.

This other SO question gives an argument.

Understanding your user is really important, although what you said about gamers is perfectly true.

I'm not familiar with responsive, but it looks promising as well

0
source

More articles:


All Articles