Introduction to CSS Media Queries, Responsive Web Design:- If we look at the latest trends of accessing websites , then we found most of the readers & users prefer mobile devices such as IOS/Android to access the websites or gather relevant information online. So its essential for bloggers to make their site compatible with all sized devices.
Previous Approach:- one of the earlier used technique to make the website mobile friendly was to create additional webpage with different layout & setup it to the sub domain of website. In that technique there was a redirection to the different webpage that are compatible to mobile devices. But when it comes for all device width, it becomes complicated to setup design and create sub domains for different devices. Check out all the methods to implement media queries for responsive web design below at the same page at bscriptsource.com
Introduction to CSS Media Queries, Responsive Web Design
What is Media Query?
It is a powerful feature of CSS which permits users to build a webpage with different layouts only in a single page. It is predefined set of CSS rules which allow developers to make the webpage compatible and change according to device width.
How to Use & Implement Media Query?
Media query is used to setup layout as according to different width in the stylesheets. It can be used through three different methods:
Method 1:-
Add the below given syntax in the 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: 480 px)’ href=’mobile.css’ />
Here we have used different stylesheet in media attribute for different media types.
All:- this media query is used for all media type devices. It sets default layout for all type devices.
Print:- this is used for setup the layout of page used by printers.
Screen:- It is used to set default layout for computer, mobile or tablet etc.
Method 2:-
You can also use this media query instead of method 1 by adding the below code in <style> tag of homepage:
@import “mobile.css” screen and (max-width: 480px);
Above given code will import the mobile.css (mobile layout), when the width of device will be 480px or lower.
Method 3:-
Add this code to external style sheet or include between <style> tag of 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 applied in the web page only if the width is 480px.
Changing background for various device width:
HTML Code:-
Create a new html file as “media.html” & copy this code to it.
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
</body>
</html>
CSS Code:-
Create CSS file as “media.css” and add following code:
body{background-color:#aaa;}
@media only screen and (max-width: 980px){
body{background-color:#fff;}
}
@media only screen and (max-width: 720px){
body{background-color:#ddd;}
}
@media only screen and (max-width: 480px){
body{background-color:#000;}
}
Now open media.html in web browser & resize the browser window to check the background effect at different width.