Responsive Media Query

 /* Responsive Styles */
    @media (max-width: 768px) {
        add ccs here
    }
    @media (max-width: 480px) {
       add css here
    }

Fonts with specific Media Query

 <link rel="stylesheet" href="styles.css" media="only screen and (max-device-width: 480px)">

<link rel="stylesheet" href="styles_mobile.css" media="only screen and (min-device-width: 480px)">

Media query

/* for Big PC & Display */

@media only screen and (min-width: 1900px) {

.tps-section {

height: 1080px;

}

}

/* for Laptop and PC */

@media only screen and (min-width: 1366px) and (max-width: 1900px) {

.tps-section {

height: 786px;

}

}

/* for Tablet & Small Laptop */

@media only screen and (min-width: 991px) and (max-width: 1366px) {

}

/* for mobile & tablet */

@media only screen and (min-device-width : 360px) and (max-width: 991px) {

.tps-section .tps-wrapper h1 a{

padding-top: 25%;

padding-left:8px;

padding-right:8px;

line-height: 16px;

}

.tps-section {

height: 300px;

}

}

/* End Mobile Query */