Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Standard dimensions for Desktop, Tablet and Mobile

Hi everyone!

What are the "average" width of a webpage for a desktop? I mostly set it to 1200px.

What are the dimensions for media queries to when i resize it , it goes you know , it changes , is the width 768px width and then it changes to tablet view?

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Hi,

Yes , I'm trying to make my site responsive thats why I'm asking about the media queries , and the resolution .

Thank you all.

2 Answers

Dustin Matlock
Dustin Matlock
33,856 Points

Aurelian, I think there may be two answers to this question. As web designers, we mostly try to make our websites responsive, but there are more common screen resolutions.

According to the latest data from StatCounter, 1366×768 screens just surpassed 1024×768 as the most popular screen resolution used by the visitors to StatCounter's global network of sites. Three years ago, 1024×768 still accounted for almost 42% of all visitors to the roughly three million sites that use StatCounter ... —TechCrunch

Ken Alger
STAFF
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Aurelian;

Here's what I use in pixels, I got it from the Sass in the Real World Series, book 2:

$small-screen-min-width: 320px;
$small-screen-max-width: 767px;
$medium-screen-min-width: 768px;
$medium-screen-max-width: 1024px;
$large-screen-min-width: 1025px;

Hope it helps.

Ken