Return to site

Mobile Web: Responsive design

· fullstack

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 makes it easier to design flexible responsive layout structure without using float or positioning.
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow: auto;
.container .col {
flex: 1;
padding: 1rem;