-
CSS Syntax
-
CSS Selectors
-
CSS How To
-
CSS Comments
-
CSS Colors
-
CSS Backgrounds
-
CSS Borders
-
CSS Margins
-
CSS Padding
-
CSS Dimension
-
CSS Box Model
-
CSS Outline
-
CSS Text
-
CSS Fonts
-
CSS Links
-
CSS Lists
-
CSS Tables
-
CSS Display
-
CSS Position
-
CSS Overflow
-
CSS Float
-
CSS Align
-
CSS Combinators
-
CSS Pseudo-class
-
CSS Opacity
-
CSS Attr Selectors
-
CSS Forms
-
CSS Transitions
-
CSS Transforms
-
CSS Animations
-
CSS !important
-
CSS Flex
-
CSS GRID
-
CSS Media Queries
CSS Media Queries
CSS media queries are a powerful feature that allows you to apply different styles to your web page based on the characteristics of the device or viewport where the page is being displayed. Media queries enable you to create responsive web designs that adapt to various screen sizes, orientations, and other device properties.
Here’s how CSS media queries work and how you can use them:
Syntax:
@media media-type and (media-feature) {
/* CSS rules for this media query */
}
– `media-type`: Specifies the type of media you want to target. Common values include `screen` (for screens, including desktops, laptops, tablets, and smartphones), `print` (for printers), `all` (applies to all media types), and more.
– `media-feature`: Defines the specific condition or feature you want to target. Common media features include `width`, `height`, `orientation`, `max-width`, `min-width`, `max-height`, `min-height`, and more.
Example:
/* Apply styles when the viewport width is 600px or wider */
@media screen and (min-width: 600px) {
/* CSS rules for screens with a minimum width of 600px */
body {
font-size: 18px;
}
}
/* Apply styles when the viewport width is less than 600px */
@media screen and (max-width: 599px) {
/* CSS rules for screens with a maximum width of 599px */
body {
font-size: 16px;
}
}
In this example, we have two media queries:
1. The first media query applies styles when the viewport width is 600px or wider, increasing the font size to 18px.
2. The second media query applies styles when the viewport width is less than 600px, reducing the font size to 16px. This is a common technique used in responsive web design to adjust text sizes for different screen sizes.
Media Queries sizes
Media queries can be used to target specific screen sizes or ranges of screen sizes by using the `width` and `height` media features. Here are some common media query sizes that you might use in responsive web design:
1. Small Screens (Smartphones):
– Max width: 480px
– Typical media query: `@media screen and (max-width: 480px) { /* Styles for small screens */ }`
2. Medium Screens (Tablets):
– Min width: 481px
– Max width: 768px
– Typical media query: `@media screen and (min-width: 481px) and (max-width: 768px) { /* Styles for medium screens */ }`
3. Large Screens (Laptops and Desktops):
– Min width: 769px
– Max width: 1024px
– Typical media query: `@media screen and (min-width: 769px) and (max-width: 1024px) { /* Styles for large screens */ }`
4. Extra Large Screens (Large Desktops):
– Min width: 1025px
– Typical media query: `@media screen and (min-width: 1025px) { /* Styles for extra large screens */ }`
5. Portrait Orientation:
– Max height: 768px (common for tablets)
– Typical media query: `@media screen and (max-height: 768px) { /* Styles for portrait orientation */ }`
6. Landscape Orientation:
– Min height: 769px
– Typical media query: `@media screen and (min-height: 769px) { /* Styles for landscape orientation */ }`
7. High-DPI (Retina) Screens:
– Min height: 769px
– Typical media query: `@media screen and (min-height: 769px) { /* Styles for landscape orientation */ }`
8. Print Styles (for Printers):
– Min height: 769px
– Typical media query: `@media screen and (min-height: 769px) { /* Styles for landscape orientation */ }`
9. Custom Media Query Ranges:
You can define custom media query sizes and ranges based on your specific design requirements. For example:
@media screen and (min-width: 600px) and (max-width: 800px) {
/* Custom styles for a specific screen size range */
}
These are just some common examples of media query sizes. The exact sizes you use may vary depending on your design and the breakpoints you choose for your responsive layout. It’s important to test your designs on various devices and adjust your media queries accordingly to ensure a consistent and user-friendly experience across different screens and devices.
Here’s a simplified example of a responsive webpage that changes its background color using media queries:
In this example:
– The background color of the `body` element changes based on two media queries:
– When the screen width is 768px or less, the background color becomes orange (`#ff6600`).
– When the screen width is 480px or less, the background color changes to light blue (`#3399cc`).
You can save this code as an HTML file and open it in a web browser to see how the background color adapts to different screen sizes by resizing the browser window.
Here’s another example of using media queries to create a responsive grid layout that changes the number of columns based on screen size:
In this example:
– The grid layout initially has three columns with equal widths, creating a 3-column grid.
– Media queries are used to adjust the number of columns and gap between items at different screen sizes:
– When the screen width is 768px or less, the grid switches to a 2-column layout with a smaller gap.
– When the screen width is 480px or less, the grid becomes a single-column layout with minimal gap.
You can save this code as an HTML file and open it in a web browser to see how the grid layout adapts to different screen sizes by resizing the browser window.
Here’s another example of a responsive layout using flexbox and transitions to create a card-like effect when hovering over items:
In this example:
– Flexbox is used to create a responsive grid layout with cards.
– Media queries are applied to adjust the number of cards per row at different screen sizes: 2 cards per row on tablets and 1 card per row on mobiles.
– Transitions are used to create a smooth transformation and box-shadow change effect when hovering over flex items. The cards move up slightly and gain a shadow on hover.
You can save this code as an HTML file and open it in a web browser to see how the flexbox layout and hover effects work at different screen sizes by resizing the browser window and hovering over the cards.
Common Use Cases for Media Queries:
1. Responsive Layouts: You can rearrange or hide page elements, change fonts, adjust padding and margins, and more to create layouts that adapt to various screen sizes.
2. Retina Displays: You can serve higher-resolution images and graphics to devices with high-density screens.
3. Print Styles: You can define specific styles for printing, ensuring that your web pages look good on paper.
4. Orientation: You can adjust styles based on whether the device is in portrait or landscape orientation.
5. Accessibility: You can enhance accessibility by adjusting styles for larger text sizes or high-contrast themes when needed.
By using CSS media queries, you can make your web pages more user-friendly and visually appealing across a wide range of devices and screen sizes.
