Responsive Design

Viewport

html

<meta
  name="viewport"
  content="width=device-width, initial-scale=1"
/>

html

<meta
  name="viewport"
  content="width=device-width, initial-scale=1"
/>

Compare devices

CSS Media query

Media types: all, print, screen, speech
Media features: width, height, orientation
Logical operators: and, not, only

Mobile First and Breakpoints

css

/* rulesets */
 
@media screen and (min-width: 500px) {
  /* rulesets */
}
 
@media screen and (min-width: 1000px) {
  /* rulesets */
}

css

/* rulesets */
 
@media screen and (min-width: 500px) {
  /* rulesets */
}
 
@media screen and (min-width: 1000px) {
  /* rulesets */
}

/codes/css/responsive-design/menu/index.html

<ul class="navigation">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
</ul>

/codes/css/responsive-design/menu/index.html

<ul class="navigation">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
</ul>

/codes/css/responsive-design/menu/css/style.css

body {
  margin: 0;
  font-family: sans-serif;
}
 
.navigation {
  background-color: #42A5F5;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
 
.navigation li {
  text-align: center;
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
}
 
.navigation li:hover,
.navigation li:active {
  background-color: #90CAF9;
  cursor: pointer;
}
 
.navigation li a {
  color: #fff;
  text-decoration: none;
}
 
@media all and (min-width: 700px) {
  .navigation {
    flex-direction: row;
    justify-content: space-around;
  }
}
 
@media all and (min-width: 1000px) {
  .navigation {
    justify-content: flex-end;
  }
}

/codes/css/responsive-design/menu/css/style.css

body {
  margin: 0;
  font-family: sans-serif;
}
 
.navigation {
  background-color: #42A5F5;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
 
.navigation li {
  text-align: center;
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
}
 
.navigation li:hover,
.navigation li:active {
  background-color: #90CAF9;
  cursor: pointer;
}
 
.navigation li a {
  color: #fff;
  text-decoration: none;
}
 
@media all and (min-width: 700px) {
  .navigation {
    flex-direction: row;
    justify-content: space-around;
  }
}
 
@media all and (min-width: 1000px) {
  .navigation {
    justify-content: flex-end;
  }
}

Responsive Image

image-responsive

/codes/css/responsive-design/image-responsive/index.html

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

/codes/css/responsive-design/image-responsive/index.html

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

Demo

References

Editar esta página