found breakpoints not sure which media queries to use

Question

I have went through and found all of the em and px breakpoints in my website but I am not sure which of the following media queries to use:

• Max-Device-Width
• Min-Device-Width
• Max-Width
• Min-Width

For example: On my website my navigation breaks anywhere below 43.75em. What would be the proper or best used media query for my site. Any suggestions or advice would be greatly appreciated. I have self taught myself HTML5 & CSS3 just can't seem to grasp Media Queries.

I am currently using max-width but the media query doesn't seem to be functioning when the browser is resized smaller than 43.75em.

-Luke

Answer 1

As your media query is not dependent on any device, its only dependent on width (43.75em), you can do

@media (max-width: 43.75em) { ... }

But specifying width in em will make it dependent on browser size dependent set by user. So if you are setting your base size it will be perfectly fine (genrally people keep 1em = 16px) You can also set screen media query, screen works for desktop and mobile both

@media screen and (max-width: 43.75em) { ... }