- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS Data Type - <resolution>
The CSS data type <resolution>, when used in media queries, indicates the pixel density of an output device, such as its resolution.
Instead of using physical measurements, the units for screens are CSS inches, centimeters, or pixels.
Units
dpi - Indicates the number of dots in an inch. Printing documents frequently have a significantly higher dots per inch (dpi) than screens, which typically have 72 or 96 dpi. One inch is equivalent to 2.54 centimeters, so one dpi is roughly equivalent to 0.39 dots per centimeter (dpcm).
dpcm - Indicates the number of dots per centimeter. Since one inch is equivalent to 2.54 cm, one dot per centimeter (dpcm) is roughly equivalent to 2.54 dots per inch (dpi).
dppx - Indicates the number of dots per unit of px. One dot per pixel (dppx) is equal to 96 dots per inch (dpi) due to the fixed 1:96 ratio between CSS in and CSS px, which corresponds to the default resolution for images displayed in CSS as specified by image-resolution.
x - Alias for dppx.
Syntax
One of the listed units is followed by a positively valued <number> in the <resolution> data type. The unit symbol and the number should be separated by no space, just like in all other CSS dimensions.
CSS <resolution> - Basic Example
The following example demonstrates the usage of CSS datatype <resolution>
<html> <head> <style> div { margin: 10px; background-color: aqua; } @media (min-resolution: 80dpi) { .box1 { background-color: red; } } @media (max-resolution: 300dpi) { .box2 { background-color: yellow; } } @media (resolution: 96dpi) { .box3 { background-color: pink; } } </style> </head> <body> <div class="box1">This box will have a red background when the screen resolution is at least 80dpi.</div> <div class="box2">This box will have a yellow background for devices with a maximum resolution of 300dpi.</div> <div class="box3">This box will have a pink background when the screen resolution is exactly 96dpi.</div> </body> </html>
To Continue Learning Please Login
Login with Google