css_reponsive_web

Posted on Edited on In ,

Responsive Web Design

Responsive web design is broken down into three main components, including flexible layouts, media queries, and flexible media.

flexible layouts

The first part, flexible layouts, is the practice of building the layout of a website with a flexible grid, capable of dynamically resizing to any width. Flexible grids are built using relative length units, most commonly percentages or em units. These relative lengths are then used to declare common grid property values such as width, margin, or padding.

Relative length units, specifically related to the viewport size of the browser or device. These new units include vw, vh, vmin, and vmax

  • vw viewports width
  • vh viewports height
  • vmin Minimum of the viewport’s height and width
  • vmax Maximum of the viewport’s height and width
1
2
3
4
.container {
    width: 100vw;
    height: 80vmax;
}

media queries

flexible media

Rules

  • Do NOT use large fixed width elements
  • Do NOT let the content rely on a particular viewport width to render well
  • Use CSS media queries to apply different styling for small and large screens
  • Always Design for Mobile(small device) First, This will make the page display faster on smaller devices
  • Hide Elements With Media Queries(hide something for small device)
  • Different Images for Different Devices
    Example
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    .menu {
      // use percent of container not fixed width like width: 500px etc
      width: 25%;
      float: left;
    }
    .main {
      width: 75%;
      float: left;
    }

    // If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size, same thing for video as well.
    img {
      max-width: 100%;
      height: auto;
    }

Mobile First

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

Typical device

1
2
3
4
5
6
7
8
9
10
11
 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}