A usable, accessible experience is vital for a successful website. If your readers have a positive experience, they are more likely to carry out a call to action, including purchasing products. They are also more likely to return or recommend your site to others. Experience is key.

Media queries offer different CSS features that can customize your website. They let you tailor each user’s experience based on the capabilities of their device. Learn how to give your readers the best experience, whether they're using their phone or a large desktop monitor.

1. The pointer Feature

The @media rule has a pointer feature that allows you to customize your design based on the primary pointing device. You can test for availability and quality.

This pointer media query feature takes one of three values: none, coarse, or fine. The none value applies when there’s no pointing device. The coarse value applies when the primary pointing device has a diminished level of accuracy. And the fine value applies when the primary pointing device has a high level of accuracy.

Using the pointer Feature

        <!DOCTYPE html>

<html lang="en">

<head>

   <meta http-equiv="X-UA-Compatible" content="IE=edge">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <style>



       input[type="radio"] {

           appearance: none;

           border: solid;

           border-color: black;

           margin: 0;

       }

      

       input[type="radio"]:checked {

           background: red;

       }

      

       @media (pointer: fine) {

           input[type="radio"] {

           width: 15px;

           height: 15px;

           border-radius: 20px;

           border-width: 1px;

           }

       }

      

       @media (pointer: coarse) {

           input[type="radio"] {

           width: 25px;

           height: 25px;

           border-radius: 20px;

           border-width: 2px;

           }

       }

   </style>

   <title>Pointer</title>

</head>

<body>



<label for="options">Options to Choose From: </label>

<input type="radio" id="options" > Option One

<input type="radio" id="options" > Option Two



</body>

</html>

The code above generates two input radio options, which will vary based on the accuracy of a computer’s primary pointing device.

A computer that has an accurate (or high quality) primary pointing device will display the following web page:

Accurate pointing device display

A computer that has a primary device with limited accuracy (or low quality) will display the following web page:

Limited accuracy pointing device display

The device that has a primary pointing device with a limited level of accuracy has larger radio buttons. This gives a better user experience for such users. With the pointer feature, you can ensure that all your users have a pleasant experience, regardless of their device.

2. The any-pointer Feature

Like the pointer feature the any-pointer media query feature targets pointing devices. However, the any-pointer feature evaluates every pointing device of a computer. The any-pointer feature also uses the none, coarse, and fine values.

Using the any-pointer Feature

           @media (any-pointer: fine) {

           input[type="radio"] {

           width: 15px;

           height: 15px;

           border-radius: 20px;

           border-width: 1px;

           }

       }

      

       @media (any-pointer: coarse) {

           input[type="radio"] {

           width: 25px;

           height: 25px;

           border-radius: 20px;

           border-width: 2px;

           }

       }

You can simply replace the code above with the media query section of the code in the pointer feature example. The code above renders an appropriate display based on the quality of any pointing device that a computer might have.

3. The hover Feature

The hover media query feature evaluates whether the primary input mechanism of a device is capable of hovering over the elements in a UI.

Using the hover Feature

             /* CSS */

  a{

           text-decoration: none;

           color: black;

       }

       @media (hover: hover) {

           a:hover {

               color: blue;

           }

       }

   <!-- HTML -->

   <a href="#"> A link element</a>

The code above will display an <a> element. It will change color (from black to blue) whenever the primary input mechanism of a device (that supports hovering) hovers over it.

4. The any-hover Feature

The any-hover media query targets any input mechanism, including the primary input mechanism.

Using the any-hover Feature

        @media (any-hover: hover) {

           a:hover {

               color: blue;

           }

       }

The media query above produces a hover effect for any input mechanism that is capable of hovering over an element.

5. The resolution Feature

The resolution media query feature calculates the number of pixels displayed by a specific device. A device that displays more pixels per inch has a better resolution because it displays images with more detail. This feature can help a developer to decide which device users might see elements in a UI more clearly.

The resolution feature uses range. This means that as well as using the resolution keyword, you can use min-resolution and max-resolution. The media query resolution feature belongs to the resolution data type. This means that the resolution feature is measurable in one of three units: dots per inch (dpi), dots per centimeter (dpcm), or dots per pixels (dppx).

Using the resolution Feature

        /* CSS */

@media (min-resolution: 72dpi) {

 p {

   color: white;

   background-color: blue;

 }

}

   <!-- HTML -->

   <p>

      Lorem ipsum dolor sit, amet consectetur adipisicing elit.

   </p>

The lowest resolution a device can have and still display quality images is 72dpi. So, if a device has a resolution of 72dpi or more it will display the following output in its browser:

Resolution media feature display

6. The orientation Feature

A device viewport can only have one of two orientations: portrait or landscape. You should note that a viewport orientation is different from a device orientation. If a device uses a soft keyboard, its viewport may change from portrait to landscape while the device itself is still in portrait position.

Using the orientation Feature

        /* CSS */

       body{

           display: flex;

       }

       section{

           border: 2px solid blue;

           padding: 3px;

           margin: 3px;

       }

       @media (orientation: landscape) {

           body {

               flex-direction: row;

           }

       }



       @media (orientation: portrait) {

           body {

               flex-direction: column;

           }

       }



   <!-- HTML -->

   <section id="section-1"> Lorem ipsum, dolor sit amet consectetur adipisicing elit.</section>

   <section id="section-1"> Lorem ipsum, dolor sit amet consectetur adipisicing elit.</section>

   <section id="section-1"> Lorem ipsum, dolor sit amet consectetur adipisicing elit.</section>

The code above changes the layout of a webpage base on the orientation of a device.

A device with a viewport in landscape mode will display the following webpage:

Landscape mode display

A device with a viewport in portrait mode will display the following webpage:

portrait mode display

7. The height Feature

The height media query feature allows you to specify CSS styling based on the viewport height of a user’s device. This feature supports range, so you can also use the min-height and max-height keywords.

Using the height Feature

              /* CSS */

       @media (min-height: 360px) {

           p{

               border: 2px dotted orangered;

           }

          

       }



   <!-- HTML -->

   <p>

       Lorem ipsum dolor sit amet consectetur adipisicing elit.

   </p>

The code above customizes what a user sees based on the height of their device. Users with a device height of 360px and up will see something similar to the following webpage:

Height media display

Devices with a height below 360px will not display the border around the paragraph on the webpage.

8. The width Feature

The width media query feature allows you to create specific CSS styling based on the viewport width of a user’s device. This feature also supports range, so you have the option of using the min-width and max-width keywords.

Using the width Feature

         /* CSS */

       @media (min-width: 600px) {

           p{

               border: 2px solid purple;

           }

          

       }

   <!-- HTML -->

   <p>

       Lorem ipsum dolor sit amet consectetur adipisicing elit.

   </p>

The code above customizes what a user sees based on the width of their device. Users with a device width of 600px and more will see something like the following webpage:

Width media display

Using width and height-based media queries can be an effective strategy in making your website responsive.

9. The color Feature

The color media query feature evaluates a device's color component (red, green, blue). The value refers to how many bits a displaye uses for each component, which defines how many different colors it can show. Modern devices typically use a 24-bit display which uses eight bits per color component. It also takes an integer value, where a colorless device is zero.

The color feature also uses the min-color and max-color ranges.

Using the color Feature

               /* CSS */

       @media (min-color: 7) {

           p{

               border: 2px solid green;

           }

          

       }

   <!-- HTML -->

   <p>

       Lorem ipsum dolor sit amet consectetur adipisicing elit.

   </p>

Devices with a color component of seven and up will display the following output in their browsers:

Color media display

Now You Can Create Unique User Experiences

You should be able to use these advanced media queries to enhance the experience of each user that visits your website or application. It's important to give mobile users and desktop users an equally positive experience on your site.

Media queries are not the only CSS tools that can strengthen your developer skills.