2

I'm doing some testing on the RWD (Responsive Web Design) and was seraching for the most common breakpoints. I came across this:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
body {
background-color: #7763a5; }
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
body {
background-color: #011C40; }
}

@media only screen  and (min-width : 1224px) {
body {
background-color: #3957FC; }
}

I tried to resize the window of my browser (using Chrome) and found out that none of the styles takes effect except for the one with the (min-width : 1224px) attribute.

Why does that happen and how shall I test for portable devices styles? Also, is it OK to write the conditional statement for the other devices like that?

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

}

Because the last on aimed at desktop is just written without the "device" part, mentioned in the other statements.

I reviewed this question difference between max-width and max-device-width. To be fair, I kind of got something out of the answer, but still do not know why my browser on my desktop refuses to apply the styles when I resize the window.

Community
  • 1
  • 1
AndrewMk
  • 443
  • 1
  • 4
  • 14
  • If you use max-device-width, when you change the size of the browser window on your desktop, the CSS won't change, because your desktop doesn't change size. If you use max-width, when you change the size of the browser window on your desktop, you might be shown mobile-orientated styling, such as touch-friendly elements and menus and that kind of thing. – Cristi Calacianu Jun 03 '20 at 08:43

1 Answers1

0

You can use 

@media (max-width: px) {}
@media (min-width: px) {}

For any size

St4ck
  • 1
  • 2