An important feature of CSS is how to present document on different media types like paper, screen, printers and so on. The media types is not supported by devices. CSS 3 introduce media query that works on device capability rather than types.
This post gives you little bit introduction about media query.
What is css media query?
 |
| CSS media query |
What is the use of css media query?
- Viewport size (height and width)
- Device size (height and width)
- Orientation
- Resolution
How to write media query in CSS?
@media not|only media types and (expression) { // CSS code.(selector {property: value;}) }
The media query is defined by @media rule and consist of logical operators, media types and media features written in form of expression.
The media types
Media types represents types of medium on which content displayed.
Following are the media types:-
1. screen
Different devices screens like desktop, laptop, tablet and smartphone.
2. printers
for printers.
3. speech
for screen readers who read content loud.
4. all
for all types of devices.
Logical operators of media query
The logical operators are used for creating complex media queries.
Logical operators used in media query are and, only and not.
Media features media query
Media features specifies matching expression that we try to match with output device.
Media features(expression) are written in pair of "property: value" manner.
Following properties are used as media features.
height :- specifies height of viewport in numeric value.
max-height:- specifies maximum height of viewport.
width :- specifies width of viewport in numeric value.
max-width:- specifies maximum width of viewport.
aspect-ratio :- defines aspect-ratio of viewport.
color :- defines color value for output device in bits.
color-index :- defines numbers of color values the device can display.
monochrome :- defines numbers of bits per color for monochrome device.
orientation :- specifies orientation of viewport. (landscape or portrait)
scan :- specifies scanning process done on output device.
resolution :- specifies resolution of devices with dpi or dpcm.
Note:- There are lots of media features above are used as beginners level.
How media query works?
media query checks for expression and type of medium on which web document is displayed. If both types and expression are true then css code is executed and CSS styles applied to web document. If media types is unknown then result becomes false.
Examples of media query
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html> <head> <title>Media Qurey</title> <style> @media screen and (max-width:800px) { body { background-color:#009900; text-align:center; } } </style> </head> <body> <h1>background color is GREEN</h1> <h3>when width is 800px or less</h3> </body> </html> |
Output:-
 |
| Media query max-width(background color change) |
 |
| Media query (max-width) output on laptop browser window width is 800px |
 |
| Media query (max-width) output on mobile |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html> <head> <title>Media Qurey</title> <style> @media screen and (min-width:800px) { body { background-color:#0000FF; text-align:center; } } </style> </head> <body> <h1>background color is BLUE</h1> <h3>when width is 800px or more</h3> </body> </html> |
Output:-
 |
| Media query (min-width) output on laptop - browser window width is 800px |
 |
| Media query (min-width) output on laptop - browser window is greater than 800px |
 |
| Media query (min-width) output on mobile |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!DOCTYPE html> <html> <head> <title>Media query images</title> <style> img { height:700px; width:900px; } @media screen and (max-width:600px) and (max-height:800px) { img { width:500px; height:500px; border:5px groove #999999; } } </style> </head> <body> <img src="Desert.jpg" /> <img src="IMG_20170206_132153.jpg" /> <img src="Desert.jpg" /> <img src="IMG_20170206_132153.jpg" /> <img src="Desert.jpg" /> </body> </html> |
Output:-
0 Comments