HTML Responsive Web Design
Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones).
Responsive Web Design is about using HTML and CSS to resize, hide, shrink, enlarge, or move the content to make it look good on any screen:
Setting The Viewport
When making responsive web pages, add the following <meta> element in all your web pages:
Example
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Responsive Images
Example
<img src="img_girl.jpg" style="width:100%;">
Responsive Text Size
Example
<h1 style="font-size:10vw">Hello World</h1>
Media Queries
Example
<style>
.left, .right {
float:left;
width:20%; /*The width is 20%, by default*/}
.main {
float:left;
width:60%; /*The width is 60%, by default*/}
/*Use a media query to add a breakpoint at 800px:*/
@media (max-width:800px) {
.left, .main, .right {
width:100%; /*The width is 100%, when the viewport is 800px or smaller*/
}}</style>
