CSS - Resolution

CSS - Resolution

About

resolution is a media feature that is used in media query to target styling rule to a specific device.

Example

(max-width: 375px) and (min-resolution:192dpi) 180px

Javascript Calculation

The resolution with javascript can be calculated by multiplying the device pixel ratio by 96.

console.log("The resolution of this device is "+window.devicePixelRatio*96+" dpi (ie pixel ratio of "+window.devicePixelRatio+").");





Discover More
CSS - Media Features

CSS media feature is the feature of a media that can be used in a media query in order to target the styling rule to a specific device. width (the total width of the page in CSS pixels (logical...
Image Intrinsic Dimension
Raster (BitMap) Image

Raster graphics (also called bitmap) is one of the two type of image. The image is represented as dot matrix data structure. A raster is technically characterized by the: width and height of the image...
Responsive HTML image with the srcset attribute

How to delegate the choice of an image to the browser with the srcset attribute.



Share this page:
Follow us:
Task Runner