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
|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|
|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).|
|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
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 rulesNote: 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
|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|
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.
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
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 deviceNote: Optionally, limits can be set using the prefix min and max repectively
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)
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.