Responsive Web Design means using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, laptops, and phones) as per size of the devices:
A web page should look good and neat on any device. It also be convenient to use.
Setting The Viewport
The viewport is the user’s visible area of a web page.
When making responsive web pages, add the
<meta> element in all your web pages:
This will set the viewport of your web page, which will give the browser instructions on how to control the page’s dimensions and scaling.
If we don’t use the Viewport in the web page, then the web page doesn’t look great and the contents in the web page are not resized according to the dimensions of devices.
Responsive images are images that scale nicely to fit in any browser size.
#Using the width Property
If the CSS
width property is set to 100%, the image will be responsive and looks perfectly into the browser size:
Responsive Text Size
The text size can be set with a “vw” unit, which means the “viewport width”.
That way the text size will follow the size of the browser window:
Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 100cm wide, 1vw is 1cm.
A media query is an HTML/CSS functionality that allows the content of a Web page to adapt to the type of media that the page is being rendered in, such as a computer screen or that of a phone or tablet.
This is considered as a core technology for implementing responsive Web design.
In addition to resize text and images, it is also common to use media queries for making your web page responsive.
With media queries you can define completely different styles for different browser sizes.
It is advised to run this code snippets by changing the size of your browser.
In the above code you can see how we used the media queries to display 3 contents on the browser.
It’s time to see the output of that content. Here you go.
In the above picture you can observe that the dimension of the browser is 360 X 740.The content is adjusted to size of the browser.
Let’s change the dimension of the browser and check again.
In the above picture you can observe that the dimension of the browser is 800 X 1280.The content is adjusted to size of the browser.
That’s it. I hope you understood why responsive web designs are important and how you can accomplish them using media queries. With the help of this article you can also design a basic responsive web templates.
Author: B.K.Sai Kalyan
To know more about the author: website