Media Screen CSS

Something Like that:
@media

In the CSS you can write many more media screen
Media for Tablet Portrait view

CSS

@media (min-width:768px){
/*Your CSS code*/
}

Media for Tablet Landscape view

CSS

@media (min-width:992px){
/*Your CSS code*/
}

Media for Desktop

CSS

@media (min-width:1200px){
/*Your CSS code*/
}

Media for Mobile Landscape view

CSS

@media (max-width:767px){
/*Your CSS code*/
}

Media for Mobile Portrait view

CSS

@media (max-width:479px){
/*Your CSS code*/
}

There is also CSS for Portrait and Landscape view
orientation : portrait
orientation : landscape

CSS

@media (max-width:767px) and (orientation : portrait){
/*Your CSS code*/
}
@media (max-width:767px) and (orientation : landscape){
/*Your CSS code*/
}

Is any one know How CSS read in browers?
Bottom to Top

Yes That’s why always write your css code like this.

CSS

@media (min-width:768px){
/*Your CSS code*/
}
@media (min-width:992px){
/*Your CSS code*/
}
@media (min-width:1200px){
/*Your CSS code*/
}
@media (max-width:767px){
/*Your CSS code*/
}
@media (max-width:479px){
/*Your CSS code*/
}