Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

media

The CSS @media rule is a conditional rule that enables authors to serve up different styles for different devices and screen sizes.

Media Queries

Media queries are logical expressions that can check the 'media type'(type of device) and specific 'media features' in order to allow for style changes that will make the layout of the document more compatible with the size and type of screen that the document is being viewed with. Media queries can be placed in external style sheets, in the document using the <style> element, or applied in the <link> element's 'media' attribute.

Here we will use @media to create a basic responsive layout. The CSS for the document changes if the screen is or becomes less than 768px. Some or all of the elements in the document can be changed inside the @media rule block. Checking your document on a smart phone will show you all of the practical adjustments you should put into the @media block to make it mobile-friendly. <style> body { background: orange; } h1 { font-size:50px; } @media screen and (max-width: 768px) { body { background: pink; } h1 { font-size:20px; } } </style> <h1>Hello World</h1> Use media queries directly in the <link> element's media attribute if you wish to use style sheets instead. <head> <link rel="stylesheet" media="screen and (min-width: 0px)" href="small.css"> <link rel="stylesheet" media="screen and (min-width: 1000px)" href="medium.css"> <link rel="stylesheet" media="screen and (min-width: 1400px)" href="large.css"> </head>

Media Query Syntax

A media query can be made up of one or more individual queries separated by commas.

@media query, query, query { } An individual query is made up of the following optional components: query - only/not media_type and ( media_features ) and ( ... This example shows how to comma separate multiple queries. It will target screen viewports under 800px wide, and print viewports over 500px wide. @media screen and (max-width: 800px), print and (min-width: 500px) { /* styles go here */ } An example of a barebones media query that is loose, essentially targeting everything: @media { }

Media Types

all - all media types. aural - speech synthesizers. braille - tactile feedback devices. handheld - small screen handheld devices. print - paged opaque material or print preview windows. projection - projectors and projection devices. screen - computer screens(including tablets and smart phones). tty - fixed-pitch character grids. tv - television-type devices.

Target all devices: @media all { } /* or */ @media { } Target computer screens: @media screen { }

The most common application of media queries is to adjust document layouts for 'screen' and 'print' media types.

Query Tokens

only - only the specified media type will be affected. @media only screen { } not - all media types except the specified type will be affected. @media not screen { } and - add more expressions to the media query. Screens between 600px and 900px width will get the specialized styles. @media screen and (min-width: 600px) and (max-width: 900px) { }All media types between 600px and 900px width will get the specialized styles. @media (min-width: 600px) and (max-width: 900px) { }The 'and' token must have whitespace on either side of it or else the media query will not work. /* this code will result in an invalid media query */ @media screen and(max-width: 768px) { }

Media Features

Tip: Viewport dimensions and screen dimensions are not exactly the same thing. Viewport is the window that the document is contained within on the screen. Only if you full-screen an application in the browser(F11 key), would the viewport and screen have the same dimensions.

width - width of the viewport. value: length min/max prefixes: yes @media screen and (width: 1600px) { } /* targets viewports that are exactly 1600px wide */ @media screen and (min-width: 800px) { } /* target viewports that are 800px and larger */ @media screen and (max-width: 800px) { } /* target viewports that are 800px and smaller */ @media screen and (min-width: 600px) and (max-width: 900px) { } /* ranging 600px - 900px */ height - height of the viewport. value: length min/max prefixes: yes @media screen and (max-height: 500px) { } /* target viewports that are 500px and smaller */ device-width - width of the screen. value: length min/max prefixes: yes @media screen and (device-width: 1600px) { } /* targets screens that are exactly 1600px wide */ @media screen and (min-device-width: 800px) { } /* target screens that are 800px and larger */ device-height - height of the screen. value: length min/max prefixes: yes @media screen and (max-device-height: 500px) { } /* target screens that are 500px and smaller */ orientation - orientation of the screen. value: portrait, landscape min/max prefixes: no @media all and (orientation:portrait) { } aspect-ratio - the ratio of the 'width' to the 'height'(viewport dimensions). value: ratio min/max prefixes: yes @media screen and (aspect-ratio: 16/9) { … } device-aspect-ratio - the ratio of the 'device-width' to the 'device-height'(screen dimensions). value: ratio min/max prefixes: yes @media all and (device-aspect-ratio: 16/9) { } color - number of bits per color component. Non-color devices have a value of zero. value: integer min/max prefixes: yes @media all and (min-color: 1) { } color-index - number of entries in the color lookup table. value: integer min/max prefixes: yes @media all and (min-color-index: 256) { } monochrome - number of bits per pixel in a monochrome frame buffer. value: integer min/max prefixes: yes @media all and (min-monochrome: 1) { } resolution - resolution of the screen. value: resolution min/max prefixes: yes @media screen and (min-resolution: 150dpi) { } scan - tv screen scanning process. value: progressive, interlace min/max prefixes: no @media tv and (scan: progressive) { } grid - query whether the output device is grid or bitmap. grid=1 otherwise=0 value: 0, 1 min/max prefixes: no

@media handheld and (grid) and (max-width: 15em) { }

Official Documentation

http://www.w3.org/TR/css3-mediaqueries/

CSS

At Rules

charsetcounter styledocumentfont facefont feature valuesimportkeyframesmedianamespacesupports