Resize the browser window to see the effect!
This example shows a menu that will float to the left of the page if the viewport is 550 pixels wide or wider. If the viewport is less than 550 pixels, the menu will be on top of the content.
Media queries are very helpful if you want to customize your website for different devices like mobile phones,
tablets, desktops, etc. without any change in markups. Different CSS properties are specified for different
screen sizes and at a time only that CSS will work which is defined for the current screen size. For example, In a mobile device, CSS
stylesheet rules written under the mobile device media query, will be implemented and hence the website will be customized that
way.
Media queries are logical expressions which can result into either true or false. If the given query happens to be true then
the code(related stylesheet) inside the query block will get executed otherwise not. It is same like the condition check in
if statement. Try to understand how to use the media queries in the webpage from the examples below, they are very
important if you want to make a website compatible with all the devices of different screen sizes.
Given below are some features on which you can apply media queries. These features will get checked according to the media query and if they evaluates to true then changes will happen. In the table below, the Min/Max column will tell you whether the Min/Max attributes can be used with that feature inside the media query or not, like min-height, max-resolution, etc.
| Feature | Value | Min/Max | Description |
|---|---|---|---|
| device-aspect-ratio | integer | yes | It gives the condition for the aspect ratio of the device. |
| device-height | pixels | yes | It gives the condition for a particular height of the output device. |
| device-width | pixels | yes | It gives the condition for a particular width of the output device. |
| grid | integer | no | It is used for a grid-based device. |
| height | pixels | yes | It gives the condition for a particular height of the rendering surface. |
| resolution | DPI/DPCM | yes | It gives the condition for resolution of the display screen. |
| width | pixels | yes | It gives the condition for width of the rendering surface. |
One of the basic way to implement media queries in the webpage is to write them inside the CSS stylesheet in an alternate section.
The following example changes the background-color to blueviolet if the viewport is 550 pixels wide or wider
(if the viewport is less than 550 pixels, the background-color will be lightgreen.)
The media query will only apply if the media type is screen and the viewport is 550px wide or wider.
The media query will only apply if the media type is screen and the viewport is 550px wide or wider.
The following example shows a menu that will float to the left of the page if the viewport is 550 pixels wide or wider (if the viewport is less than 550 pixels, the menu will be on top of the content).
This example shows a menu that will float to the left of the page if the viewport is 550 pixels wide or wider. If the viewport is less than 550 pixels, the menu will be on top of the content.
Follow Us: