CSS Media Queries

Media and CSS – Part 2

Foreword: In this part of the series I explain how a style sheet or portion can target one or more media types with constraints.

By: Chrysanthus Date Published: 28 Dec 2015

Introduction

This is part 2 of my series, Media and CSS. In this part of the series I explain how a style sheet or portion can target one or more media types with constraints. You should have read the previous part of the series before coming here because this is a continuation.

A media query is a statement that enables a style sheet or portion of a style sheet to target one or more media types (output devices) with requirements on width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, and grid.

You can use the @media or @import at-rule for a query. The query part of the statement begins with one or more media types, followed by other requirements. You can also use the value of the media attribute of the HTML link element for the query.

Logical Operators
In the query, the logical operators, OR, AND and NOT can be used. Or is typed as a comma. AND is typed as AND followed by a space. NOT is typed as NOT. NOT means, what comes after is the opposite. There is also the operator, ONLY, typed as ONLY, meaning Only.

Media Features

with
The ‘width’ media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport including the size of a rendered scroll bar (if any). For paged media, this is the width of the page box. To code the width, you have to take into consideration, the following property table:

    Value: <length>
    Applies to: visual and tactile media types
    Accepts min/max prefixes: yes

Examples:

    @import url("http://www.site.com/foo.css") print and (min-width: 25cm);

    @media screen and (min-width: 400px) and (max-width: 700px) { … }

    @media handheld and (min-width: 20em), screen and (min-width: 20em) { … }

The first code states (provides) that the style sheet applies to a printer AND the minimum width of the page box should be 25cm. Note how parentheses have been used to associate the expression, “min-width: 25cm” to the AND operator, and.

The second code states (provides) that the declaration block, { … } applies to a screen, AND the minimum width of the viewport should be 400px AND the maximum width of the viewport should be 700px. Note how parentheses have been used to limit the expression, “min-width: 400px” to the operator, AND. Also note how parentheses have been used to limit the expression, “max-width: 700px” to the second AND operator.

The third code states (provides) that the declaration block applies to a handheld device AND minimum width of the viewport of the handheld device is 20em. All that, OR the declaration block applies to a screen AND minimum width of the viewport of the screen is still 20em. In a query, OR is comma, as in this third code. Note the use of the parentheses in the code.

height
The ‘height’ media feature describes the height of the targeted display area of the output device. For continuous media, this is the height of the viewport including the size of a rendered scroll bar (if any). For paged media, this is the height of the page box. To code the height, you have to take into consideration, the following table:

    Value: <length>
    Applies to: visual and tactile media types
    Accepts min/max prefixes: yes

device-width
The ‘device-width’ media feature describes the width of the rendering surface of the output device. For continuous media, this is the width of the screen. For paged media, this is the width of the page sheet size. To code the device-width, you have to take into consideration, the following table:

    Value: <length>
    Applies to: visual and tactile media types
    Accepts min/max prefixes: yes

Example:

    @media screen and (device-width: 800px) { … }

This code provides that the declaration block, { … } apply to a screen AND the screen currently displays exactly 800 horizontal pixels.

device-height
The ‘device-height’ media feature describes the height of the rendering surface of the output device. For continuous media, this is the height of the screen. For paged media, this is the height of the page sheet size. To code the device-height, you have to take into consideration, the following property table:

    Value: <length>
    Applies to: visual and tactile media types
    Accepts min/max prefixes: yes

Example:

    @import url("foo.css") screen and (device-height: 600px);

The code provides that the style sheet applies to a screen AND the screen has exactly 600px.

orientation
The ‘orientation’ media feature is ‘portrait’ when the value of the ‘height’ media feature is greater than or equal to the value of the ‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’. To code orientation, you have to take into consideration, the following property table:

    Value: portrait | landscape
    Applies to: bitmap media types
    Accepts min/max prefixes: no

Examples:

    @media all and (orientation:portrait) { … }

    @media all and (orientation:landscape) { … }

The first code provides that the declaration block applies to any (all) media type AND the display has to be portrait. The second code is for landscape.

aspect-ratio
The ‘aspect-ratio’ media feature is defined as the ratio of the value of the ‘width’ media feature to the value of the ‘height’ media feature. Old TV’s for example, have an aspect ration of 4:3 . To code the aspect-ratio, you have to take into consideration, the following table:

    Value: <ratio>
    Applies to: bitmap media types
    Accepts min/max prefixes: yes

device-aspect-ratio
The ‘device-aspect-ratio’ media feature is defined as the ratio of the value of the ‘device-width’ media feature to the value of the ‘device-height’ media feature. To code the device-aspect-ratio, you have to take into consideration, the following table:

Value: <ratio>
Applies to: bitmap media types
Accepts min/max prefixes: yes

Examples:
If a screen device with square pixels has 1280 horizontal pixels and 720 vertical pixels (commonly referred to as "16:9"), the following Media Queries will all match the device:

@media screen and (device-aspect-ratio: 16/9) { … }
@media screen and (device-aspect-ratio: 32/18) { … }
@media screen and (device-aspect-ratio: 1280/720) { … }
@media screen and (device-aspect-ratio: 2560/1440) { … }

Because 32/18 = 16/9; 1280/720 = 16/9; 2560/1440 = 16/9

color
The ‘color’ media feature describes the number of computer bits per color component of the output device. The greater the number of bits, the more the number of colors the device can display. If the device is not a color device, the value is zero. To code color, you have to take into consideration, the following table:

Value: <integer>
Applies to: visual media types
Accept min/max prefixes: yes

Examples:
These two media queries provide that a style sheet applies to all color devices:

@media all and (color) { … }
@media all and (min-color: 1) { … }

The following media query provides that a style sheet applies to color devices with 2 or more bits per color component:

@media all and (min-color: 2) { … }

If different color components are represented by different number of bits, the smallest number is used.

For instance, if an 8-bit color system represents the red component with 3 bits, the green component with 3 bits and the blue component with 2 bits, the ‘color’ media feature will have a value of 2.

In a device with indexed colors, the minimum number of bits per color component in the lookup table is used.

color-index
The ‘color-index’ media feature describes the number of entries in the color lookup table of the output device. If the device does not use a color lookup table, the value is zero. To code color-index, you have to take into consideration, the following table:

    Value: <integer>
    Applies to: visual media types
    Accepts min/max prefixes: yes

Examples:
Here are two ways to provide that a style sheet applies to all color index devices:

@media all and (color-index) { … }
@media all and (min-color-index: 1) { … }

The following media query provides that a style sheet applies to a color index device with 256 or more entries:

    @import url("foo.css") all and  (min-color-index: 256);

monochrome
Monochrome means two colors, such as block and white. The ‘monochrome’ media feature describes the number of bits per pixel in a monochrome frame buffer. If the device is not a monochrome device, the output device value will be 0. To code monochrome, you have to take into consideration, the following table:

    Value: <integer>
    Applies to: visual media types
    Accepts min/max prefixes: yes

Examples:
Here are two ways to provide that a style sheet applies to all monochrome devices:

@media all and (monochrome) { … }
@media all and (min-monochrome: 1) { … }

To provide that a style sheet applies to monochrome devices with more than 2 bits per pixels, you can use:

@media all and (min-monochrome: 2) { … }

To provide that there is one style sheet for color pages and another for monochrome, you can use:

    <link rel="stylesheet" media="print and (color)" href="http://…" />
    <link rel="stylesheet" media="print and (monochrome)" href="http://another…" />

resolution
The ‘resolution’ media feature describes the resolution of the output device, i.e. the density of the pixels. When querying devices with non-square pixels, in ‘min-resolution’ queries, the least-dense dimension must be compared to the specified value, and in ‘max-resolution’ queries, the most-dense dimensions must be compared instead. A ‘resolution’ (without a "min-" or "max-" prefix) query never matches a device with non-square pixels. To code resolution, you have to take into consideration, the following table:

    Value: <resolution>
    Applies to: bitmap media types
    Accepts min/max prefixes: yes

Examples:
The following media query expresses (states) that a style sheet is usable on devices with resolution greater than 300 dots per inch:

@media print and (min-resolution: 300dpi) { … }

The following media query provides that a style sheet is usable on devices with resolution greater than 118 dots per centimeter:

@media print and (min-resolution: 118dpcm) { … }

scan
The ‘scan’ media feature describes the scanning process of "tv" output devices. To code tv, you have to take into consideration, the following table:

Value: progressive | interlace
Applies to: "tv" media types
Accepts min/max prefixes: no

Examples:
This media query provides that a style sheet is usable on tv devices with progressive scanning:

@media tv and (scan: progressive) { … }

grid
The ‘grid’ media feature is used to query whether the output device is grid or bitmap. If the output device is grid-based (e.g., a "tty" terminal, or a phone display with only one fixed font), the value will be 1. Otherwise, the value will be 0.

Only 0 and 1 are valid values. (This includes -0.) Thus everything else creates a malformed media query.

Parentheses in Media Query
If you want any expression after a logical operator, to apply only to that logical operator, then use parentheses around the expression. Note: the AND operator must always be followed by space.

That is it for this part of the series.

Chrys

Broad Network

Related Articles

CSS Media Queries

Media and CSS – Part 2

Introduction

Related Links

Comments