Design Responsive
Viewport
Set the viewport:
<meta name="viewport" content="width=device-width, initial-scale=1">
Compare devices
Mobile First and Breakpoints
/* rulesets */
@media screen and (min-width: 500px) {
/* rulesets */
}
@media screen and (min-width: 1000px) {
/* rulesets */
}
menu/index.html:
ul {
display: flex;
flex-direction: column;
align-items: stretch;
}
@media screen and (min-width: 700px) {
ul {
flex-direction: row;
justify-content: space-around;
}
}
@media screen and (min-width: 1000px) {
ul {
justify-content: flex-end;
}
}
Responsive Image
image-responsive/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<picture>
<source media="print" srcset="img/ifpb-hd.jpg">
<source media="(max-width: 400px)" srcset="img/ifpb.jpg">
<source media="(max-width: 800px)" srcset="img/ifpb-2x.jpg">
<source media="(max-width: 1200px)" srcset="img/ifpb-4x.jpg">
<img src="img/ifpb-hd.jpg" alt="Imagem IFPB">
</picture>
</body>
</html>
Demo
References