CSS Media Queries CSS media queries allow you to apply styles based on the characteristics of a device or the environment displaying the web page. CSS media queries are essential for creating responsive web pages. The CSS @ media rule is used to add media queries to your style sheet. Definition and Usage The CSS @ media rule is used in media queries to apply different styles for different media types/devices. Media queries can be used to check many things, such as: width and height of the viewport width and height of the device orientation (is the tablet/phone in landscape or portrait mode?) resolution Using media queries are a popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones. You can also use ... Media queries can go far beyond width and height, accessing user preferences for accessibility features and theme colors. Using media queries to make layout adjustments is a great start to a responsive design, which builds on these features and more. Styles dynamically adjust based on screen width using media queries . For screens 800px or smaller, the text color becomes blue, and the font size decreases to 18px.
