Media Queries
Hello Guys, these are the media queries I use, Can you chip in some advice if I am doing it wrong or right? Thanks
I do desktop to mobile, it's just a preference that's it.
/* 2xl /
@media (max-width: 1536px) {
}
/ xl /
@media (max-width: 1280px) {
}
/ lg /
@media (max-width: 1024px) {
}
/ md /
@media (max-width: 768px) {
}
/ sm /
@media (max-width: 640px) {
}
/ xs */
@media (max-width: 475px) {
}
2 Replies
My advice is not to stick to predefined media queries ๐
If you're creating a template or a system where a lot of users will be using it for different purposes, with different types of content, then you need to provide a lot of options.
If you're working on your own projects, you need breakpoints for when the design needs to be updated... most things I work on (which, to be fair, are very content heavy) tend to need 3 at the most.
Also, I generally avoid
max-width media queries. There are times for them, but generally, I'd suggest going with min-width as a default, and max-width in situations where it makes sense.if you follow the last suggestion (using
min-width instead of max-width), you should give a try to taking a mobile-first approach
for example, if you want a grid with 4 elements at desktop and 1 for mobile size, just do nothing for mobile (because elements stack by default), then set grid-template-columns to 1fr 1fr for a small tablet-ish size, then 3 columns for a large tablet/small desktop/laptop and then the full desktop size