Return to site

Mobile Web: Responsive design

· angular

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;
}

All Posts
×

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!

OK