Categories

Responsive Design with media query CSS

Responsive Design is “One site for all device”. It is a technique that website should display properly in all sizes of the screen starting from large Desktop to small Mobile phones. It increases the visibility on search engines as well as visitors to your website.

The benefit of a responsive design is that the user on any device will have the best experience on your website. it is also a great way to display the most important content for the mobile user.

Start a Responsive Design

There are multiple things need to consider before creating a responsive layout.

these are the main components of a responsive web design:

  • Fluid grid system
  • Flexible content
  • Media queries
  • Device Testing

Fluid grid system

The fluid grid system is very important technic for responsive design. Flexible fluid grid system has used for building responsive websites. With the help of a fluid grid system website are flexible and scalable for all screen size.

Flexible content

In responsive design, content will automatically adjust to fit the size of the screen. it should be readable on all devices. For small screen need to increase/decrease the font size and line height for easily readable content as well as looks good.

Media queries

Responsive design is achieved through “media queries”. A media query is a technique introduced in CSS3. It uses the @media rule to include a block of CSS properties and tell the browser that it should ignore or apply depending on the user’s device.

Device Testing

Test your website on different devices (e.g. Desktop, laptop, iPad, iPhone and another screen size smartphone.) including all screen sizes before making it live. There are lots of online tools available for screen resolutions. These tools make the testing activities easier and quick.

Start a Responsive project

Start a new project called responsive-HTML and a new file called responsive.html.

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Responsive Design</title>
</head>
 
<body>
</body>
</html>

Add the following meta tag in head section in the responsive.html file

1
<meta name="viewport" content="width=device-width, initial-scale=1">

with added meta tag

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Design</title>
</head>
 
<body>
</body>
</html>

Now add meadia rule in style sheet.
Simply updating the background color on theelement according to the device screen size.

we have added 3 break point in media query Desktop, Tablet and Mobile.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@media screen and (min-width:1025px) {
body{
background:red;
}
}
 
/* Tablet Styles */
@media screen and (max-width:1024px) and (min-width:768px) {
body{
background:blue;
}
}
 
/* Mobile Styles */
@media screen and (max-width:767px) and (min-width:320px) {
body{
background:green;
}
}

In the above code there are 3 different background colors is used in 3 different condition. In the desktop large screen above 1025px background color will red. when resize the browser to Tablet screen width from 1024px to 768px background color will blue and in the small screen width from 767px to 320px background color will green.

You can also load different style sheets for different media, like this:

1
2
<link rel="stylesheet" media="screen and (min-width: 1025px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 768px)" href="smallscreen.css">

Conclusion:

This is very important that working with media queries will not impact the performance of website. Slow loading site will lose users and visitor. So when working with images always use SVG, web fonts, web type and CSS wherever possible is the website and test the website properly in different screen and divices.

hope this article is helpful for you. If you like this article please share this in social media and If you have any query or suggestion, please comment below.

If you would like to write guest posts for Blog Identity, you can contact us on info@blogidentity.com and check our submission guidelines.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *