Media Query

Uses Of Media Query

Media query is the css property that is allow to write css property for different devices such as screen, printer devices and other devices to render the webpage. Media query is used to create a webpage for different type of screen according to their resolution and size. It is allow to create logical condition of css to apply on webpage for different devices. This is the most important to create webpage responsive. Responsive mean webpage will be render according to devices screen capability or other medium.

Media query is used to check height or width of viewport with and height of device, orientation (landscape or portrait) for applying css according to devices.

Media Queries in CSS3 are a technique that enables designers to apply CSS styles based on the characteristics of the device or viewport being used to view a website. They allow you to create responsive and adaptive designs that adjust to different screen sizes, resolutions, and orientations. Here are the types of media queries in CSS3:

1. width: The width media query type checks the width of the viewport. You can use it to target different styles based on the width of the screen, such as adjusting the layout for different screen sizes.

2. height: The height media query type checks the height of the viewport. You can use it to target different styles based on the height of the screen, such as adjusting the layout for devices with different aspect ratios.

3. device-width: The device-width media query type checks the actual physical width of the device, rather than the viewport width. This is useful for targeting specific devices with different screen sizes.

4. device-height: The device-height media query type checks the actual physical height of the device, rather than the viewport height. This is useful for targeting specific devices with different aspect ratios.

5. orientation: The orientation media query type checks the orientation of the device, whether it's in portrait or landscape mode. You can use it to apply different styles based on the orientation, such as adjusting the layout for different screen shapes.

6. aspect-ratio: The aspect-ratio media query type checks the aspect ratio of the viewport. You can use it to target different styles based on the ratio of width to height.

7. resolution: The resolution media query type checks the resolution of the device. You can use it to target high-density displays and adjust the styles accordingly.

These media query types allow you to create responsive and adaptive designs that cater to the wide range of devices and screen sizes that are used to view websites today. By using media queries, you can ensure that your website provides an optimal user experience, regardless of the device being used.

Basic Syntax Of Media Query

'@media' is a keyword in css to create media query css . create a media query when 'screen and width of screen' is match with the condition then css code apply on it.

@media screen and (max-width:960px) {  
    /* css code  will be applied if device width is less than or equal to 960px */
   color: green;
   
}

/*css for small screen devices  */
@media screen and (max-width: 768px) {
    h1 {
        color: green;
        font-size: 24px;
    }

    p {
        width: 100%;
        padding: 5px;
        color: red;
    }
}