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 and
Tablet 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;
}

}