CSS CSS Layout Basics CSS Layout Project Introducing the Project

Aaron Selonke
Aaron Selonke
10,323 Points

Mobile First best practices

I noticed Guil likes to use the 769px as the major breakpoint between small and large viewports.

Why does he like 769px?

Is there an official best practices for which breakpoints to be aware off? For example is there a common set of breakpoints that I can add across many projects that would cover that majority of devices/viewports used for viewing

5 Answers

Erik Nuber
Erik Nuber
20,629 Points

Here's a great site I just found. They suggest sticking to just three sizes. They have alot of analytics as to how many people use what size screens as well.

CSS Breakpoints: where & how much? You don't need to write mediaqueries for every possible screen resolution. To keep things simple you could target three groups: smaller than 768 px smaller than 1024 px larger than 1024 px

http://www.websitedimensions.com/

Erik Nuber
Erik Nuber
20,629 Points

I am just starting the bootstrap courses and they use specific breakpoints based on size. From what I remember going through the courses, they more suggest creating breakpoints at areas that make sense. The reason being is that there are to many devices to account for everything especially with all the various phones.

// Extra small screen / phone xs: 0, // Small screen / phone sm: 544px, // Medium screen / tablet md: 768px, // Large screen / desktop lg: 992px, // Extra large screen / wide desktop xl: 1200px

Aaron Selonke
Aaron Selonke
10,323 Points

Bootstraps tablet md: 768px, Guils uses 769px. A little amusing, Where do these numbers come from

Julian Gutierrez
Julian Gutierrez
19,201 Points

These dimensions have stuck since the days where we targeted devices with our breakpoints. You'll tend to see 768px as a breakpoint for tablet type devices because the screen resolution for an apple ipad is 768x1024.

geoffrey
geoffrey
28,722 Points

I know this post is 1 month old but I wanted to give my point of view and experience.

So, honestly even though CSS frameworks used some key break points, It's still best practice when you work on a responsive web page to resize the window of your browser step by step, and everytime you see something wrong at a specific resolution, you correct it for this specific resolution.

I agree with what Erik Nuber wrote. There are so many devices to take into account, so stiching only to some resolutions is still not a good idea.

And even if there are some resolutions that are widely used today, you never know what tommorrow will bring!