Bootstrap 3 Media Queries, responsive

less-variable.md

• Usages

 .footer{
  font-size: 50px;
  @media @md-screen, @media @sm-screen {
        font-size: 30px;
    }
    @media @xs-screen {
        font-size: 40px;
    }
}

/*  For Large devices Desktops */
@lg-screen: ~"only screen and (max-width:@{screen-lg})";
/*  For Medium devices Desktops */
@md-screen: ~"only screen and (max-width:@{screen-md})";
/*  For Small devices Tablets*/
@sm-screen: ~"only screen and (max-width:@{screen-sm})";
/*  For Phones*/
@xs-screen: ~"only screen and (max-width:@{screen-xs})";
/*  For Retina*/
@retina-screen: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5)";

media-query.css

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
    
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}


/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
    
}

responsive.css

/*! flexiblegs.style.css */

/* xl */

  /* your style */

/* responsive */

  /* lg */

    @media (max-width: 1024px) {

      /* your style */

    }

  /* md */

    @media (max-width: 768px) {

      /* your style */

    }

  /* sm */

    @media (max-width: 667px) {

      /* your style */

    }

  /* xs */

    @media (max-width: 414px) {

      /* your style */

    }