Yes, CSS Container Queries are what you’re looking for. The CSS Containment Module is the specification that details this feature. You can read more about the decade of work, including proposals, proofs-of-concept, discussions and other contributions by the broader web developer community here! For more details on how such a feature might work and be … Read more
Use a comma to specify two (or more) different rules: @media screen and (max-width: 995px), screen and (max-height: 700px) { … } From https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries Commas are used to combine multiple media queries into a single rule. Each query in a comma-separated list is treated separately from the others. Thus, if any of the queries in … Read more
Let’s break down your examples one by one. @media (max-width:632px) This one is saying for a window with a max-width of 632px that you want to apply these styles. At that size you would be talking about anything smaller than a desktop screen in most cases. @media screen and (max-width:632px) This one is saying for … Read more
IMO these are the best breakpoints: @media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480×320 phones (Android) */ } @media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ } @media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800×480 phones (Android) */ } @media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops … Read more