Very simple Real Time Problem:
If you are fully new to the CSS Media queries then just consider the real problem of the world. Consider you are CSS expert and in your CSS style sheet you have defined width to 500px for an element like div or some thing else. The look and feel may be OK when its viewed in wider screen like Laptop. But what about mobile devices? You may see some odd look and feel in the smaller devices. This is just a simple example. There might be many other problems with the sizes of devices. CSS Media Queries are the rescue for all the situations.
Defining CSS Media Queries:
CSS3 media queries are logical expressions that evaluate the current values of media features in the user’s browser. If the media query expression evaluates as TRUE, the contained CSS is applied.
[focus]
Media Query Syntax:
@media mediatype and (media feature) {
CSS-Code;
}
[/focus]
1. All media queries starts with @media
Example:
@media screen and (min-width:490px) {
/* Some CSS */
}
/*max-width can also be used*/
The meaning is:
Are we presently rendering content on a screen, AND is the window currently at least 490 pixels wide? Yes? OK! Apply these CSS rules.
2. Whats screen in the above?
In the above code screen is media types. There are other types also. Below are the media types including screen
i) screen : Any device which has screen. Example Laptop, Smart Phone, Tablet etc.
ii) print : Used for printers.
iii) speech : Used for screen readers that reads the page.
iv) all : Used for any device
3. Using comma as logical OR
@media print, screen and (monochrome) {
/*Some CSS*/
}
Is this being rendered on a printer OR is it being rendered on a screen that is monochrome (black and white)?
Yes? Use these styles!
4. CSS for only Black and White Printers
@media print and (monochrome) {
/*Some CSS*/
}
monochrome is to represent black and white. For color printer if we want to define css then
@media print and (color) {
/*Some CSS*/
}
5. The below css will be applicable only for color screen
@media screen and (color) {
/*Some CSS*/
}
6. Using external css
<link rel="stylesheet" type="text/css" href="some.css" media="screen and (color)" />
The above external css will be applicable only for media type screen with colors.
7. Using only
The old browser does not understand media queries. To hide such css rules for old browser we use only
@media only screen and (max-width:500px){
/*Some CSS*/
}
There is no such media type only. So the style sheet will be ignored by the old browser. But for the modern browser the css will be applied to screen media type. To take care of old browser only should be used immediately after @media.
List of Media Features
min-width: Specifies the minimum width of the display area
min-resolution: Specifies the minimum resolution of the device, it may be dpi or dpcm
min-monochrome: Specifies the minimum number of bits per “color” on a monochrome (greyscale) device
scan: Specifies progressive or interlaced scanning of a television
width: Specifies the width of the display area
resolution: Specifies the resolution of the device, it may be dpi or dpcm
monochrome: Specifies the number of bits per “color” on a monochrome (greyscale) device
orientation: Specifies whether the display is in landscape mode or portrait mode
min-height: Specifies the minimum height of the display area
min-device-height: Specifies the minimum height of the device
min-device-width: Specifies the minimum width of the device
min-device-aspect-ratio: Specifies the minimum ratio between the width and the height of the device
min-color-index: Specifies the minimum number of colors the device can display
min-color: Specifies the minimum number of bits per color component for the output device
min-aspect-ratio: Specifies the minimum ratio between the width and the height of the display area
max-width: Specifies the maximum width of the display area
max-monochrome: Specifies the maximum number of bits per “color” on a monochrome (greyscale) device
max-resolution: Specifies the maximum resolution of the device, it may be dpi or dpcm
max-device-width: Specifies the maximum width of the device, such as a computer screen
max-height: Specifies the maximum height of the display area
max-color: Specifies the maximum number of bits per color component for the output device
max-aspect-ratio: Specifies the maximum ratio between the width and the height of the display area
device-height: Specifies the height of the device
device-aspect-ratio: Specifies the ratio between the width and the height of the device
aspect-ratio: Specifies the ratio between the width and the height of the display area
color-index: Specifies the number of colors the device can display
color: Specifies the number of bits per color component for the output device
max-device-height: Specifies the maximum height of the device
max-device-aspect-ratio: Specifies the maximum ratio between the width and the height of the device
max-color-index: Specifies the maximum number of colors the device can display
grid: Specifies whether the device is a grid device or not
height: Specifies the height of the display area
device-width: Specifies the width of the device
Summery:
Media Queries are basic building blocks of responsive design. Media Queries can be used for Liferay responsive theme development as well.