A major challenge of responsive design is creating the right experience for the right device, and with thousands of devices and browser options, this can quickly become overwhelming. Different devices require variations on layout to best organize and display a website's content. More broadly, the most common categories include desktop, tablet and mobile layouts. Fortunately, modern CSS makes this task less arduous with media queries.
What Is a Media Query
A media query, @media, is a block of CSS that is only rendered if a condition is met. They are most useful when you want to modify your site's layout for a specific device or specific characteristics and parameters such as screen resolution or browser viewport width.
A media query specifies an optional media type and any number of media feature expressions. You can read more about them in Using media queries from MDN Web Docs.
Best Practices with Monetate & Media Queries
There are many combinations of media query which can be used for various devices. However, when using Monetate to append CSS to a page, it is most often the best practice to match any existing media queries as closely as possible, to ensure the breakpoints and behavior are consistent with the native site. If you are unable to find the native media query breakpoints, there is a handy list of commonly used device targeting media queries you can refer to in Media Queries for Standard Devices from CSS-Tricks.