How to design web pages that adapt to media browser size?

/* Mobile Layout: 480px and below. */    .gridContainer {     margin-left: auto;     margin-right: auto;     width: 88.626%;     padding-left: 1.1869%;     padding-right: 1.1869%;    }/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */@media only screen and (min-width: 481px) {    .gridContainer {    width: 91.4836%;    padding-left: 0.7581%;    padding-right: 0.7581%;   }}/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout andTablet Layout. */@media only screen and (min-width: 769px) {    .gridContainer {    width: 88.826%;    max-width: 1232px;    padding-left: 0.5869%;    padding-right: 0.5869%;    margin: auto;   }}