The keyword "screen" indicates that the @media query will only apply to the resolution of the user's screen. You can use the keyword "and" to join more than one criteria, and you can separate criteria with a comma to use as an "or" condition. For reference to other media query types, see the MDN web docs.

Screen sizes vary widely according to brands. In mobile devices, portrait mode and landscape mode provide some very different views, and a challenge for responsive development. Using these screen sizes in a media query (along with "orientation:portrait" or "orientation:landscape" as needed) should make your CSS fit most devices.