Previous Next

CSS

CSS Overview Selectors Declarations Rule Sets Comments Reset/Normalize Origin Importance Order Specificity Inheritance Cascade Layers Inline Styles Internal Styles External Styles @import Absolute Units Relative Units Dynamic Viewport Angle Units Time Units Frequency Units: Resolution Units Keywords Color Formats Color Functions & Spaces Background Color Background Image Background Repeat Background Position Background Size Background Attachment Background Shorthand Multiple Backgrounds Linear Gradients Radial Gradients Conic Gradients Font Family Font Size Font Weight Font Style Line Height Text Align Text Decoration Text Transform Letter Spacing Word Spacing Text Shadow Text Wrap Variable Fonts Content Box Padding Box Border Box Margin Box Box Sizing Property Margin Padding Border Outline Box Shadow Block Display Inline Display Inline Block Display Static Position Relative Position Absolute Position Fixed Position Sticky Position Top Element Position Right Element Position Bottom Element Position Left Element Position Z Index Flexbox Box Layout Display Flex Flex Direction Flex Wrap Justify Content Align Items Align Content Gap, Row Gap & Column Gap Flex Grow Flex Shrink Flex Basis Flex Shorthand Order Property Align Self Practical Applications CSS Grid Layout Grid Display Grid Template Columns Grid Template Rows Grid Template Areas Justify Items Grid Auto Columns Justify Self Nested Grids Responsive Web Design Min Width Max Width Orientation Logical Operators Pointer Hover Prefers Color Scheme Fluid Images Flexible Typography Viewport Width Advanced CSS Features Defining variables Using variables Scope & Inheritance of CSS Variables Property Value Fallback Practical Applications :Hover :Active :Focus :Focus Visible :Visited :Link :First Child :Last Child :Nth Child :Nth of Type :Empty :Checked :Disabled :Enabled :Valid :Invalid :Required :Has :Not :Is :Where ::Before Pseudo Element ::After Pseudo Element ::First Letter ::First Line ::Selection ::Marker CSS 2D Transformations CSS 3D Transformations Transform Origin Transform Style Backface Visibility Transition Property Transition Duration Transition Timing Function Transition Delay Transition Shorthand Ease Timing Function Linear Timing Function Ease In Timing Function Ease Out Timing Function Ease In Out Timing Function Cubic Bezier Function Animations (@keyframes) Defining @keyframes Animation Name CSS Animation Duration Animation Timing Function CSS Animation Delay CSS Animation Iteration Count Animations Direction CSS Animation Fill Mode CSS Animation Play State CSS Filter Blur CSS Filter Brightness CSS Filter Contrast() CSS Drop Shadow CSS Grayscale CSS Hue Rotate CSS Invert CSS Opacity CSS Saturate CSS Sepia Mix Blend Mode Background Blend Mode Object Fit & Object Position Scroll Snap Type Scroll Snap Align Scroll Padding Scroll Margin Scroll Triggered Animations JS Variables

Resolution Units

In CSS, resolution units describe the density of pixels on an output device, such as a screen or a printer. These units are crucial for creating responsive designs that adapt to different devices by applying specific styles based on the screen's resolution. Understanding dpi (dots per inch), dpcm (dots per centimeter), and dppx (dots per pixel) allows developers to serve higher-quality assets or adjust layouts for high-resolution displays.

dpi (dots per inch)

This unit represents the number of dots that can be placed in a line within one inch of screen or printed space. It is a common unit for print media, but can also be used for screen-based media queries to target devices with different pixel densities.

Example 1: Basic High-Resolution Background Image

/* Swaps the background image for high-resolution screens */
@media (min-resolution: 150dpi) {
  .header {
    background-image: url('header-high-res.png');
  }
}

Explanation This code checks if the device's screen resolution is at least 150 dots per inch. If it is, a higher-resolution background image is applied to the .header element.

Example 2: Adjusting Font Size for Print

/* Increases font size for better readability on printed documents */
@media print and (min-resolution: 300dpi) {
  body {
    font-size: 14pt;
  }
}

Explanation When printing, this media query targets printers with a resolution of at least 300 dpi and increases the base font size to 14 points for improved legibility.

Example 3: Loading a High-Definition Logo

/* Provides a sharper logo for high-dpi screens */
@media (min-resolution: 192dpi) {
  .logo img {
    content: url('logo-hd.svg');
  }
}

Explanation This example replaces the source of an image within the .logo class with a high-definition SVG version on screens with a resolution of 192 dpi or more.

Example 4: Modifying Layout on High-Density Displays

/* Increases padding on a container for high-resolution devices */
@media (min-resolution: 200dpi) {
  .container {
    padding: 30px;
  }
}

Explanation For devices with a minimum resolution of 200 dpi, the padding for the .container class is increased, which can improve the visual layout on sharper screens.

Example 5: Conditional Border Style

/* Applies a thinner border on very high-resolution screens */
@media (min-resolution: 250dpi) {
  .box {
    border: 1px solid #333;
  }
}

Explanation This CSS rule applies a thin, solid border to elements with the class .box only on screens with a resolution of 250 dpi or higher.

dpcm (dots per centimeter)

Similar to dpi, dpcm measures the number of dots per centimeter. It is an alternative for developers who prefer metric units. Since 1 inch is equal to 2.54 centimeters, 1dppx is equivalent to 96dpi and approximately 37.8dpcm.

Example 1: Targeting Metric-Based High-Resolution Displays

/* Applies a high-contrast theme for screens with high pixel density */
@media (min-resolution: 60dpcm) {
  body {
    background-color: #111;
    color: #eee;
  }
}

Explanation This code targets screens with a resolution of at least 60 dots per centimeter, applying a dark theme for better visibility on such displays.

Example 2: Adjusting Image Opacity

/* Reduces image opacity on high-resolution displays for a subtle effect */
@media (min-resolution: 75dpcm) {
  .hero-image {
    opacity: 0.8;
  }
}

Explanation For screens with 75 dpcm or higher, the opacity of the .hero-image is slightly reduced, creating a faded, stylish visual effect.

Example 3: Fine-Tuning SVG Stroke Width

/* Increases the stroke width of an SVG icon on high-density screens */
@media (min-resolution: 50dpcm) {
  .icon-svg {
    stroke-width: 2px;
  }
}

Explanation This rule targets devices with a minimum resolution of 50 dpcm and increases the stroke-width of an SVG with the class .icon-svg to make it more prominent.

Example 4: Displaying a High-Resolution Watermark

/* Adds a high-resolution watermark in the background */
@media (min-resolution: 100dpcm) {
  .content::before {
    content: "";
    position: absolute;
    background-image: url('watermark-high-res.png');
  }
}

Explanation This snippet uses a pseudo-element to insert a high-resolution watermark on screens that have at least 100 dots per centimeter.

Example 5: Modifying Grid Gap

/* Increases the gap in a CSS Grid layout for high-resolution views */
@media (min-resolution: 80dpcm) {
  .grid-container {
    gap: 2rem;
  }
}

Explanation On displays with a resolution of 80 dpcm or more, this code increases the gap property in a .grid-container, creating more space between grid items.

dppx (dots per pixel)

The dppx unit represents the number of device pixels that correspond to a single CSS px unit. A 1dppx value is equivalent to a standard-resolution display, while 2dppx would represent a "Retina" or high-resolution display where one CSS pixel is backed by four (2x2) device pixels.

Example 1: Serving Retina Background Images

/* Provides a specific background image for Retina displays */
@media (min-resolution: 2dppx) {
  .hero {
    background-image: url('hero@2x.jpg');
  }
}

Explanation This media query checks if the device pixel ratio is 2 or higher. If it is, a high-resolution "Retina" background image is loaded for the .hero element.

Example 2: General High-Resolution Image Rule

/* A more flexible rule for any display with more than 1.5 device pixels per CSS pixel */
@media (min-resolution: 1.5dppx) {
  .card-image {
    background-image: url('card-image-hd.png');
  }
}

Explanation This targets a broader range of high-density displays by applying a high-definition image when the device pixel ratio is 1.5 or greater.

Example 3: Adjusting Box Shadow for Sharpness

/* Creates a more subtle box-shadow on high-dppx screens */
@media (min-resolution: 3dppx) {
  .button {
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  }
}

Explanation For very high-resolution screens (3dppx or more), this rule applies a finer, more detailed box-shadow to .button elements for a sharper appearance.

Example 4: Loading Higher Quality Video Posters

/* Sets a high-resolution poster image for a video element */
@media (min-resolution: 2dppx) {
  video {
    poster: url('video-poster@2x.jpg');
  }
}

Explanation This code ensures that on a 2dppx display, the placeholder image (poster) for a <video> element is a high-resolution version.

Example 5: Refining Gradients on High-Resolution Screens

/* Applies a smoother gradient for high-dppx displays */
@media (min-resolution: 2dppx) {
  .gradient-bg {
    background: linear-gradient(to right, #6a11cb, #2575fc);
  }
}

Explanation On high-resolution displays (2dppx and up), this CSS applies a specific linear gradient. High-density screens can render gradients more smoothly, justifying a potentially different or more complex gradient.