media

media attribute

The HTML media attribute specifies the media type and conditions for which a linked resource is intended. It can be used with <link>, <source>, and <style> elements to adjust content or styles based on factors like screen size or media type (e.g., print, screen). By utilizing media queries, developers can create responsive designs that adapt to different devices and viewing contexts.

Syntax

<tagname media="expression" />

Example

<picture>
  <source media="(min-width: 650px)" src="img.jpg">
  <source media="(min-width: 465px)" src="img.jpg">
  <!-- The img element will be selected if none of the above sources match -->
  <img src="img.jpg"  alt="Social media">
</picture>

Values

Devices:

• all: Applicable to all devices (default).
• aural: For speech synthesizers.
• braille: For braille feedback devices.
• handheld: For handheld devices with small screens.
• projection: For projectors.
• print: For printed pages or print preview.
• screen: For computer screens.
• tty: For teletypes and fixed-pitch devices.
• tv: For televisions with low resolution.

Media Features:

• width: Width of the display; can use min- or max- prefixes.
• height: Height of the display; can use min- or max- prefixes.
• device-width: Width of the device or paper; can use min- or max-.
• device-height: Height of the device or paper; can use min- or max-.
• orientation: Device orientation (landscape or portrait).
• aspect-ratio: Ratio of width to height; can use min- or max-.
• device-aspect-ratio: Ratio for the device or paper; can use min- or max-.
• color: Bits per color; can use min- or max-.
• monochrome: Bits per pixel in monochrome; can use min- or max-.
• resolution: Pixel density; can use min- or max-.
• scan: Scanning method for TV displays.
• grid: Indicates if the output device is grid or bitmap type.

Applies To

The media attribute can be used on the following html elements.

• <a>
• <area>
• <link>
• <style>
• <source>

Conclusion

The media attribute allows developers to define conditions for which a linked resource is applied, enabling responsive design based on device type, screen size, and other factors. It helps ensure that the appropriate content or style is used for different contexts, improving user experience across various devices. By using media queries, developers can optimize their website's appearance on multiple platforms.