Search within TutorialsPark

CSS3 @Media Queries


Use CSS3 @media Queries to make your website compatible for multiple types of devices.


CSS3 Media Queries

1. The CSS3 Media Queries module introduces the @media rule, which enables you to create specific CSS style rules depending upon the capabilites of the device.

Eg: Specific CSS rules for devices with different viewport width, aspect ratio, orientation etc.

Why use CSS3 @media Queries?

1. A website developed for desktop screens cannot be viewed well on a mobile handheld device, the text may appear too small, lots of zooming and scrolling will be required, there are bandwith limitations etc.

2. But with CSS3 @media queries you can detect the device using their attributes and provide each device with its custom CSS rule.

3. Thus, with @media queries you can make you website adapt to various devices(mobiles, ipad, desktops etc), with smaller(or larger) images, clearly readable text, custom navigation and layouts.


Working of CSS3 Media Queries

1.CSS3 @media queries enable you to define the conditions to test the device's feature, if the device satisfies the condition the CSS rules are applied or its else ignored.

2. The conditions are specified by setting the media type within the media attribute in the <style> element,or in @import rules, or @media rules.

The following are the list of 13 media features to test Device Capabilities while applying the CSS rules

Feature value Min/Max Description
width Length Yes Specifies the width of the Display area
height Length Yes Specifies the height of the Display Area
device-width Length Yes Specifies the width of the Device
device-height Length Yes Specifies the height of the Device
orientation portrait or
landscape
No Specifies the Orientation of the Device
aspect-ratio Ratio Yes Specifies the aspect-ratio(i.e width/height)
device-aspect-ratio Ratio Yes Specific the ratio of device-width to device-height
color Integer Yes Number of color bits per color component
color-index Integer Yes Number of entries in the device's color look up table
monochrome Integer Yes Number of bits per pixel within the monochrome frame buffer(value is 0, if not a monochrome)
resolution resolution yes The pixel density of the output device, in terms of dpi(dots per inch),dpcm(dots per cm) and dppx(dots per pixel).
scan progressive
or Interlace
No The Scanning process to be used by TV device
grid 0 or 1 No Value is 1 for grid based devices like teletype terminal, phone display with only on fixed font.Value is 0 for all other types

Note: Of all the media types mentioned, only the types all, print and screen are used commonly.

CSS3 Media Query Syntax.

1. The Media Queries specifies certain conditions to test the capabilities of the device and apply CSS rules to it.

2. There are three ways by which CSS style rules can be applied to the Webpage

External Stylesheets




Import CSS Styles

1. Media Queries can also be applied using @import rule, the main CSS stylesheet imports all device specific stylesheets.


Media Queries using @media rules

1. Media queries can also be applied using @media rule within a stylesheet or within the <style> tags.

Syntax : Media Queries using @media Rules

Example: Media Queries using @media rules

Note: Embedded stylesheets must be included only within the <head> element of the webpage.

CSS3 Viewport Size

1. The viewport width of the mobile device can be set equal to the width of the device, by using the <meta> tag within the <head> element of the webpage .


Table: Viewport Properties

Property Description Value
width Sets the Width of the Viewport Integer/ constant
height Sets the Height of the Viewport Integer or Constant
initial-scale Sets the initial scaling factor. Its a value between 0.1 to 1 Number
minimum-scale Sets the minimum scaling factor. Its a value between 0.1 and 1. Number
maximum-scale Sets the maximum Scaling factor. Its a value between 0.1 and 1. Number
user-scalable Specifies whether the display can be zoomed in and out.Default value is Yes. Yes or No
target-densitydpi Scales the page up and down depending upon the device's pixel density. Integer/Constant
color Integer Yes

Media Features

1. The Media features are used to check the capabilities of the device(dimensions, resolutions etc) using an expression and then accordingly apply the CSS style rules.

2. The expressions are basically the test condition or logic used before applying the CSS rule. Eg: not, only , and etc.


Width and Height

1. The Media Feature width specifies the width of viewport of the media, usually its the width of the browser window.

2. The limits of minimum and maximum can be set using the prefix min or max with the width respectively


Device's Width and Height

1. The Media queries feature device-width specifies the width of the screen of the device used. Incase of a paged media(i.e printer) it the width of the page sheet.

2. Similarly, the device-height specifies the height.Also, prefix of min and max can be used to define the minimum and maximum limits.


Orientation

1. The Media feature orientation has two values portrait and landscape.

portrait : When the height of media is greater than its width

landscape : When the height of media is less than its width


Aspect Ratio

1. The Media queries feature aspect-ratio specifies the ratio of width to height of the media

1. Similarly, the device-aspect-ratio specifies the ratio of device-width to device-height of the device

Note: Optionally, limits can be set using the prefix min and max repectively


Resolution

1. The media query feature resolution specifies the resolution of the output device.

2. Here min-resolution specifies the minimum pixel density and max-resolution specifies the maximum pixel density .

The units can in terms of dpi(dots per inch) or dpcm(dots per centimeter) or dppx(dots per pixel)


Pixel Ratio

1. You can target devices based on their pixel ratio using the feature -webkit-device-pixel-ratio. Here, -webkit- is a prefix , as the feature is available only on webkit browsers.

2. It specifes the pixel density and takes values as a number which acts a multiplier, for Apple retina displays the multiplier is 2.