If we talk about the latest trend of using websites, the most of the users or readers prefer mobile device like Ios/Android to view any Website. In order to get more visitors for the website we need to provide content in such manner so that it should be properly visible and displayed on all popular devices.
Older Approach:
One of the older approach to make Website compatible with mobile devices was to create separate webpage with different layout and host it to sub-domain of the website. Basically in that type of approach the url was redirected to other webpage based on the detected size of the device. But when it comes to set design for all device widths, it become tough to go with creating various sub-domains for all type of device.
What is Media Query ?
Media Query is a powerful feature of CSS which allow users to develop a web page with various layout in a single Page. It is a defined set of css rules which allow users to change layout according to the device Width.
How to use and implement media queries ?
Media query is used in stylesheet to set layout according to different width. It can be included in html file in three ways:
Method I:
Adding following Syntax in head tag of html file.
<link rel=''stylesheet'' media=''all'' href=''default.css'' />
<link rel=''stylesheet'' media=''print'' href=''print.css'' />
<link rel=''stylesheet'' media=''screen and (min-width: 480px)'' href=''mobile.css'' />Here i have used different css stylesheet as defined in media attribute for different media types:
all – It is used for all media type devices. It sets default layout for all type of devices.
print – It is used to set layout of WebPage used by printers.
screen – It is used to set layout for computer, tablets, smart-phones etc
Method II:
You can also add media queries to your webpage by adding following code between <style> tag.
@import "mobile.css" screen and (max-width: 480px);The above code will import the mobile layout(mobile.css) , when the device width will be 480px or lower than it.
Method III:
Add following code to external style sheet or include it between <style> tag of the webpage.
@media only screen and (max-width: 480px){
/* layout style which will be applied for device less than 480px */
.container{width:450px;}
}Here styles written in @media rule will be applied to the Web Page only if its width is 480px.
Changing Background of Webpage for various device width.
Html Code: Create a html file named as “media.html” and copy following code to it.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
Resize the browser to see changes.
</body>
</html>CSS Code: Create a css file named as “style.css” and add following code to it.
body{background-color:brown;}
@media only screen and (max-width: 980px){
body{background-color:blue;}
}
@media only screen and (max-width: 720px){
body{background-color:green;}
}
@media only screen and (max-width: 480px){
body{background-color:pink;}
}Now open media.html file in your web browser and resize browser window it to check the background effect at various width.
Above we discussed about making our webpage responsive for different devices by applying different css properties depending on the device width. If you liked this article, do share it with your friends. Thanks for reading complete article carefully, please provide your important feedback or comments below.
No Responses