To manage web page layout in devices having different size and resolution we use HTML Responsive technique. Now days there are too many kinds of devices like phone, tablet, laptop, big screen devices are there so it’s become challenging to manage our web page according to screen size and resolutions of devices. To resolve this problem, the concept of HTML Responsive is emerged.
What is HTML Responsiveness?
Technically HTML Responsive is nothing we just have to code our HTML Page in such a way so that it is able to auto adjust according to devices properties like screen size, resolution, orientation etc.
Problem with HTML Basic Code
We know basic HTML designing in that we are using html elements like div, table etc. and according to needs we define width and height and manage them with CSS style. Now if we opens or resize the web page then we see some unfair look in different devices because fixed height, width are not going to change and we haven’t code anything to manage it.
How to design Responsive?
To design a HTML Responsive web page there are few things we have to learn, listed below.
- Define HTML View port for respective devices.
- CSS media query.
- Never define fixed width of html element like px,cm etc. try to use variable width like %, vw etc.
HTML Viewport
A web browser uses HTML Viewport to recognize kind of device based on their screen size and resolutions. HTML Viewport is defined in meta tag of head section. Due to HTML Viewport browser get to know kind of device and it sets font-size and behaviour according to devices. See below example how we can define HTML Viewport in head section of html web page.
HTML Viewport Syntax
<meta name="viewport" content="width=device-width, initial-scale=1" />
CSS Media Query to make Responsive
This is the most important thing for making a web-page responsive. There is only one concept of media query that is we write different – different CSS for various conditions like screen size, orientation etc. If we opens web page in large size display then some other piece of CSS code works for html elements and if we open the same web page in small size screen like phone then some other piece of CSS code will work for same html elements. In this way we can manage separate dimension for large screen and small size of screen. Here it is important to know that HTML Viewport helps to recognize the type of device so that browser can activate the piece of CSS code for that kind of device.
Below we are writing some media query CSS code. It might help you!
CSS Media Query Example
<style type="text/css">
.myImg{
width:100%;
height:auto;
border:11px solid #351;
}
@media screen and (max-width: 800px){
.myImg{
width:40%;
border:4px solid lime;
}
}
</style>
Note : CSS media query is the part of advance CSS, we will learn media query in depth in CSS Tutorial.
Making HTML Image Responsive
If we want to make a HTML Image Responsive then we have to use image width in %, not in fixed dimension. We can also define max-width and max-height CSS property to control maximum and minimum height of image. See below piece of code.
Image width 100%
<img src="_imgPath" style="width:100%" />
Image Max-Width
<img src="_imgPath_here" style="max-width:450px" />
Image Min-Width
<img src="add_imgPath_here" style="min-width:230px" />
Making HTML Font Responsive
We can control HTML Font Size according to screen by using font-size in vw height unit at the place of fixed pixel unit. Here it is important to know about vw , simply it is called viewport width means 1vw means 1% of viewport width.
Font-Size
<pstyle="font-size:5vw"> you all text paragraph here listed... </p>
If we are using vw unit as font size then it will automatically make your font responsive according to devices
To Make Responsive Page you have to learn
In combined we can say that for responsiveness we have to learn media query CSS, viewport, image-responsive, text responsive.
Other Option
Now days there are too many HTML Responsive Framework are available, we can use them to make our web-page responsive. But as a developer you should learn and design yourself you own responsive web page. If you are working with any frame work then it’s also important that you should have knowledge of HTML Responsive designing, basically CSS media query.
What is HTML Responsive Framework
HTML Responsive Framework is pre-written CSS and JavaScript files, If we want to use them then simple we can use in our project and we can call CSS classes and Id which are defined in Framework file in our HTML Code.
Bootstrap is one of the best HTML Responsive Framework, you can use it. You can also learn complete Bootstrap Tutorial from our web tutorial section.