Une feuille de styles par support

  
  <link rel="stylesheet" media="screen and (max-width: 960px)" href="tablet.css" />
  
  <link rel="stylesheet" media="screen and (max-width: 640px)" href="mobile.css" />
            

Tout dans la même feuille de style

  .box{
    background-color: rgba(19, 108, 120, 1);
    opacity: .9;
  }

  /* Style pour les tablettes */
  @media (max-width: 1024px) {
    .box{
      opacity: .6;
    }
  }

  /* Style pour les mobiles */
  @media (max-width: 640px) {
    .box{
      opacity: .3;
    }
  }
            

Mobile-first

  .box{
    background-color: rgba(227, 0, 89, 1);
    opacity: .2;
  }
  
  // Tablet
  @media (min-width: 640px) {
    .box{
      opacity: 1;
    }
  }
  
  // Desktop
  @media (min-width: 1024px) {
    .box{
      opacity: .5;
    }
  }