CSS @media rule makes it possible to define different style rules for different media types which will make a web design layout responsive to screen devices and offer better readability. You can define one set of styles for computer screens and another for phones or tablets by defining media types. Moreover, you can set different styles for differebt screen sizes depending upon the viewport width and height, orientation or screen resolution.
Media queries technique is the best solution to deliver a fine tailored CSS styles to individual media devices.
@media not|only mediatype and (expressions) {
CSS-Code;
}
A media query consists of a media type and can contain one or more expressions which resolve to either true or false. The result of the query is true if the specified media type matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style rules are applied, following the normal cascading rules.
The media type is optional. If it is not included in the syntax, the rules will be applied to all devices whichever meet the expression.
You can add a separate stylesheet for media queries using the HTML <link> tag inside the <head> section of a web page or write it down in the same stylesheet where you have added other CSS rules.
Here are some examples of CSS media queries.
One way to use media queries is to have an alternate CSS section right inside your style sheet.
@media (min-width: 480px) {
body {
background: #066;
}
}
The example above changes the body background of a web page to #066 if the screen width is 480px or higher.
The following example shows a menu that will float to the left of the page if the viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the menu will be on top of the content):
@media (max-width: 767px) {
.stickymenu{
display: none;
}
}
The example above will hide elements inside the class stickymenu in screen sizes smaller than 768px.
@media (min-width: 768px) and (max-width: 991px){
.navigation{
position: relative;
}
}
Since a huge number of screen devices are launched each year in the market, it is almost impossible to call each screen size and set different style rules for each of them. A better solution is to add style rules depending upon the screen width. The general CSS media queries breakup points are shown below.
// Extra small devices (phones - 600px and down)
@media (max-width: 600px) {}
// Small devices (portrait tablets and large phones - 600px and up)
@media (min-width: 600px) {}
// Medium devices (landscape tablets - 768px and up)
@media (min-width: 768px) {}
// Large devices (laptops/desktops - 992px and up)
@media (min-width: 992px) {}
// Extra large devices (large laptops and desktops - 1200px and up)
@media (min-width: 1200px) {}
The viewport is the user's visible area of a web page. The viewport varies with the device and will be smaller on a mobile phone than on a computer screen. By default, web pages are too large to fit on the viewport of a mobile phone. To fix this, a web page can be scaled down to fit the screen adding a <meta> viewport element on a web page.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen-width of the device while initial-scale=1.0 sets the initial zoom level to 1:1 when the page is first loaded by the browser.
Check out a responsive website design example in our TRY IT YOURSELF EDITOR.
Leave a comment