Responsive web design is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes.
Here a code labs that shows you how to style your website content to make it responsive:
Visual viewport
The viewport is the user's visible area of a web page.
The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.
<meta name="viewport" content="width=device-width, initial-scale=1">
Media queries
Media queries makes it possible to define different style rules for different media types.
@media screen and (max-width: 48rem) {
.container .col {
width: 95%;
}
}
Flexbox
Flexbox makes it easier to design flexible responsive layout structure without using float or positioning.
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background: #eee;
overflow: auto;
}
.container .col {
flex: 1;
padding: 1rem;
}