Responsive Web Design Fundamentals

responsive.md

dpi = hardware dpi / dpi ratio

exemple : hardware = 1920, ratio 2, DPI = 1920 / 2 = 960

   img, object, embed, canvas, video, audio, picture {
          max-width: 100%;
   height: auto;
          _width: 100%; /* IE6 seulement */
   }


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

button min size = 48x48:

   nav a, button {
          min-width: 48px;
          min-height: 48px;
   }
   
   or
   
   padding: 1.5em;
   


   <link rel="stylesheet" media="screen and (min-width: 500px)" href="over500.css" />
   
   @media screen and (min-width:500px) {
          body {
                 background-color: white;
          }
   }
   
  @media screen and (min-width:500px) and (max-width:600px) {
          body {
                 background-color: white;
          }
   }

@import url("no.css") only screen and (min-width: 500px); // bad performance

   .container {
          display: flex;
          flex-wrap: wrap;
   }
   
   .box0 {width:50%; order:0}
   .box1 {width:50%; order:1}
   .box {width:100%; order:2}

to change div order with CSS : order:4;

Common Responsive Patterns

Column Drop

   .container {
          display: flex;
          flex-wrap: wrap;
   }

Mostly Fluid

   .container {
          display: flex;
          flex-wrap: wrap;
   }

Layout Shifter

   .container {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
   }       
   @media screen and (min-width:500px) {
          #boxA {
                 order: -1;
                 width: 50%;
          }
          .container2 {
                 width: 50%;
          }
          #boxB {
                order: 1;
          }
   }

Off Canvas

Nombre de caractère par ligne idéal pour le web : 65 base font : 16px, 1.2em line height

Two images, 50% width with margin

       body {
         font-size: 0;
         margin: 0;
       }
       img {
         margin-right: 10px;
         max-width: 426px;
         width: calc((100% - 10px)/2);
       }
       img:last-of-type {
         margin-right: 0;
       }