Css media

9 Advanced CSS Tricks for Media Query You Should Know

A usable and accessible experience is essential for a successful website. If your readers have a positive experience, they’re more likely to make a call to action, including buying products. They are also more likely to return or recommend your site to others. Experience is the key.

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


1. Pointer function

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

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

Using the pointer function







Pointer


Option One
Option Two



USE VIDEO OF THE DAY

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

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


Accurate pointing device display

A computer with a primary device with limited accuracy (or poor 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 these users. With pointer functionality, you can ensure that all of your users have a great experience, regardless of their device.

2. The functionality of any pointer

Like the pointer feature, the Any Pointer Media Query feature targets pointing devices. However, the any-pointer feature evaluates every pointing device on a computer. The any-pointer function also uses the nothing, coarseand fine values.


Using the Any-pointer Function

 @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 a computer might have.

3. The hover function

The Hover Media Query feature assesses whether a device’s primary input mechanism is capable of hovering over elements of a user interface.

Using the Hover Feature

 /* CSS */
a{
text-decoration: none;
color: black;
}
@media (hover: hover) {
a:hover {
color: blue;
}
}

A link element

The above code will output a element. It will change color (from black to blue) whenever a device’s primary input mechanism (which supports hovering) hovers over it.

4. The hover function

the hover media query targets any input mechanism, including the main input mechanism.

Using the Hover Feature

@media (any-hover: hover) {
a:hover {
color: blue;
}
}

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

5. The resolution feature

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

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

Using the solve function

/* CSS */
@media (min-resolution: 72dpi) {
p {
color: white;
background-color: blue;
}
}


Lorem ipsum dolor sit, amet consectetur adipisicing elit.


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


Display resolution multimedia function

6. Orientation function

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

Using the orientation function

/* 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;
}
}


Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

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

A device with a landscape viewport will display the following web page:


Display in landscape mode

A device with a window in portrait mode will display the following web page:


portrait mode display

7. Height function

The Height Media Query feature allows you to specify CSS styling based on the height of a user’s device viewport. This function supports scope, so you can also use the minimum height and Maximum height key words.

Using the height function

 /* CSS */
@media (min-height: 360px) {
p{
border: 2px dotted orangered;
}

}



Lorem ipsum dolor sit amet consectetur adipisicing elit.


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


Overhead media display

Devices with height less than 360 pixels will not display the border around the paragraph on the webpage.

8. Width

The width media query feature allows you to create a specific CSS style based on the width of a user’s device viewport. This feature also supports scope, so you have the option of using the minimum width and maximum width key words.


Using the width function

 /* CSS */
@media (min-width: 600px) {
p{
border: 2px solid purple;
}

}


Lorem ipsum dolor sit amet consectetur adipisicing elit.


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


Media display width

Using media queries based on width and height can be an effective strategy to make your website responsive.

9. The color feature

The color media query function evaluates the color component of a device (red, green, blue). Value refers to the number of bits a display uses for each component, which defines how many different colors it can display. 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 function also uses the min-color and max-color ranges.

Using the color feature

 /* CSS */
@media (min-color: 7) {
p{
border: 2px solid green;
}

}


Lorem ipsum dolor sit amet consectetur adipisicing elit.


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


Color multimedia display

Now you can create unique user experiences

You should be able to use these advanced media queries to improve the experience of every user who visits your website or app. It’s important to give mobile and desktop users an equally positive experience on your site.

Media queries aren’t the only CSS tools that can bolster your developer skills.


css tips and tricks

8 Essential CSS Tips and Tricks Every Developer Should Know

Read more


About the Author