Utilizando CSS Media Queries

As Media Queries definem condições para que o CSS seja utilizado em cenários específicos. Se essas condições forem aprovadas, ou seja, se o dispositivo de adequar a todas as condições estabelecidas na sua Media Querie, o CSS será aplicado.
Geralmente usamos as Media Queries dentro código CSS, que é bem mais organizado. Você linka seu CSS normalmente no HEAD do seu documento:

<link rel="stylesheet" href="estilo.css">

E dentro do código CSS, você vai separar os famosos **breakpoints**, que são as condições da largura das telas do dispositivos, que definem quando cada bloco de CSS será utilizado. Veja o código abaixo:

/* Código geral, que será herdado por qualquer dispositivos.
   nesse caso, seria o código usado no desktop.   
*/
a {
   color: blue;
  }
 
/* 
 Pra dispositivos que tem uma largura mínima de 768 pixels. Tablets, por exemplo.
*/
@media screen and (min-width: 768px) {
  a {
     color: yellow;
    }
}
 
/* 
 Com uma largura mínima de 992 pixels. Monitores por exemplo.
*/
@media screen and (min-width: 992px) {
  a {
     color: green;
    }
}
 
/* 
 Dispositivos com largura mínima de 1200 pixels. Por exemplo TVs.
*/
@media screen and (min-width: 1200px) {
  a {
     color: black;
    }
}

E assim você vai escrevendo seu CSS e alterando o layout de acordo com dispositivo desejado.