CSS Value Resolution

CSS Value Resolution

Last Updated : 29 Jun, 2021

CSS Resolution is one of the data-type. As the name suggests it is used for specification of resolution meaning the density of pixels on the output device. Resolutions are generally used while writing media-queries. The user can use the resolution with max and min prefix while writing the media Query.

What is Media Query :Media Query is used for Responsive web development which can be used to change the screen styling based on the various characteristics of the output device. It is defined in CSS3.

Characteristics of Resolution data-type:

It is always a positive value.
It always has a unit: dpi, dpcm, dppx, x.
There should not be any space between the positive value and unit.

Units: There are 3 main units for specifying Resolution-

dpi: It stands for Number of dots per inch.
dpcm: It stands for dots per centimeter.
dppx or x: dots per px unit.

Example of Resolution:

html

<!DOCTYPE html>
<html>

<head>
    <style>
        h1 {
            border: 2px solid #000000;
        }

        /* Exact resolution */
        @media (min-resolution: 10dpi) {
            h1 {
                color: white;
            }
        }

        /* Exact resolution */
        @media (max-resolution: 500dpi) {
            h1 {
                background: green;
            }
        }
    </style>
</head>

<body>
    <h1>Geeks For Geeks Example</h1>
</body>

</html>

Output:

OUTPUT

As shown in the above example :

min-resolution is set to 10dpi, hence on device with resolution greater than 10dpi color : white styling will be applied to <h1> tag
max-resolution is set to 500dpi, hence on device with resolution less than 500dpi background : green styling will be applied to <h1> tag

CSS Value Resolution

S

shantanujoshi

Improve

Article Tags :

Similar Reads

CSS Frequency Value

The frequency is a data type of CSS value. It represents the frequency dimension of sound like speaking frequency. This value is currently not used by any CSS properties. Back before it was used to measure the sound wave frequency. It holds a number with a unit(Hz or kHz). Syntax:Â frequency: number

What is a Resolution?

An image can be defined with the help of two-dimensional array specifically arranged in rows and columns. In other words, we can say an image is like a file containing some kind of visual information or data that can be displayed or rendered on some kind of screen. A resolution is an important aspec

CSS scale() Function

The scale() function is an inbuilt function which is used to resize the element in 2D plane. It scales the elements in horizontal and vertical directions.Â Syntax:scale( sx )orscale( sx, sy )Parameters:sx: It resizes the elements in horizontal plane.sy: It resizes the elements in vertical plane. If v

CSS scaleX() Function

The scaleX() function is an inbuilt function which is used to resize an element along the x-axis in a 2D plane. It scales the elements in a horizontal direction. Syntax: scaleX() = scaleX( number ) Parameters: This function accepts single parameter number which holds the scaling factor along x-axis.

CSS | Value Integer

CSS data type integer represents <integer > .It is a whole number which can be positive(+) or negative(-) .Integer contains one or more than one digits between 0-9.No decimal value is allowed . No units are required to represent an integer value. A lot of CSS properties take integer value like

CSS Value | Initial

The initial value keyword is used to set an element's CSS property to its default value. The initial keyword can be used for any CSS property, and on any HTML element. Syntax: property_name: initial; Example 1: setting font size html <!DOCTYPE html> <html> <meta charset="utf-8

CSS | Percentage Value

It represents by <percentage > takes a number as a parameter. It is used to define the relative size to the parent size. With the help of this, you can adjust all the HTML-CSS elements. In CSS, many properties that take a percentage as parameters such as padding, width, height, margin, and fon

CSS Value Inherit

The value inherit keyword is used to inherit a property to an element from its parent element property value. The inherit keyword can be used for inheriting any CSS property, and on any HTML element. Inheritance is always from the parent element in the document tree, even when the parent element is

CSS scale3d() Function

The scale3d() function is an inbuilt function which is used to resize the element in a 3D space. It scales the elements in the x, y, and z planes. Syntax:scale3d( sx, sy, sz )Parameters: This function accepts three parameters as mentioned above and described below:sx: It resizes the elements in the

Tailwind CSS Position

This class accepts more than one value in tailwind CSS. It is the alternative to the CSS Position property. This class is used for controlling how an element is positioned in the DOM.Position classes:staticfixedabsoluterelativestickystatic: This class is used to set the position of an element accord