The best CSS breakpoint value I use in my project
While designing the site, I noticed that I used some very random values for CSS breakpoints. Sometimes it is rounded, such as 800 or 1200, and sometimes it is up to a specific value of the pixel, such as 672.
I searched for the appropriate value for future breakpoints.
I spent a little time checking it and came to this conclusion.
We have 5 main equipment sizes to worry about:
- Phone portrait
- Mobile landscape
- Tablet portrait
- Tablet landscape
- laptop
These devices are mapped to these pixel values:
- Mobile portrait: less than 640 pixels
- Mobile landscape:> 640px
- Tablet portrait:> 768 pixels
- Tablet landscape:> 1024px
- Laptop:> 1280 pixels
I'm fromTail wind default.
I'm not a designer, so I don't participate in best practices every day, but I decided to design mobile devices first this time.
This means that my CSS (without any media queries) will be designed for the mobile portrait use case, and then add breakpoints that I will design for larger and larger devices, thereby prohibitingmax-width
From media queries.
I think I always go the opposite route: design a bigger screen (this is the screen I use most often), then shrink the screen, but first design a mobile device and usemin-width
It seems to be the most accepted and used solution today.
These are the media queries I will use from now on:
@media (min-width: 640px) {
}
@media (min-width: 768px) {
}
@media (min-width: 1024px) {
}
@media (min-width: 1280px) {
}
Download mine for freeCSS Manual
More CSS tutorials:
- Flexbox guide
- CSS grid tutorial
- CSS variables (custom attributes)
- Introduction to PostCSS
- CSS guarantees metallicity
- How to center an element using CSS
- CSS system fonts
- How to print HTML with styles
- Getting started with CSS transition
- CSS animation tutorial
- Introduction to CSS
- CSS guide
- How to set up Tailwind with PurgeCSS and PostCSS
- Tail wind cheat sheet
- How to continuously rotate an image using CSS
- Use CSS to make the table responsive
- How to debug CSS by halving
- CSS selector
- CSS cascade
- CSS specificity
- CSS attribute selector
- CSS colors
- CSS Unit
- CSS url()
- CSS typography
- CSS Box model
- CSS position properties
- CSS media queries and responsive design
- CSS function query
- CSS conversion
- How to style a list with CSS
- CSS vendor prefix
- CSS inheritance
- CSS pseudo-classes
- CSS pseudo elements
- Style HTML tables with CSS
- CSS Display property
- CSS calc() function
- CSS border
- Use @import to import CSS files
- CSS error handling
- CSS filter
- CSS Box size
- CSS background
- CSS comments
- CSS fonts
- CSS padding
- CSS float property and clear
- CSS normalization
- CSS z-index property
- How to disable text selection using CSS
- How to use CSS to place items at the bottom of their container
- How to invert colors using CSS
- Responsive front tags in CSS
- Responsive YouTube video embedding
- What is a good CSS breakpoint value for responsive design?
- How to align the center in Flexbox