Solucionado
Nesse caso é preciso criar uma formatação para cada tamanho de tela diferente, por exemplo tablet, celular, televisão ? E se for não seria melhor criar um arquivo externo para colocar só essas formatações de tela para não ficar um arquivo muito grande ? eu vi algumas coisas sobre flexbox e grid layout usando eles não é preciso fazer essa formatação ?
Olá Leandro tudo bem?
É possível separar as formatações de CSS em projetos, é tudo uma questão de preferência. Acho mais fácil usar um arquivo grande, pois isso fornece uma visão geral de todos os estilos que você declarou.
Se você deseja uma página de carregamento mais rápida do que sua melhor aposta seria minimizar a quantidade de solicitações, pois a sobrecarga de solicitações é muito grande.
Neste link você vai encontrar diferentes visões sobre isso, separar ou não e sobre os pontos positivos e negativos disso
Vou deixar como referência a apostila da Caelum que tem muitas informações sobre responsividade lá na pagina 109
Lá ele exemplifica para vários tamanhos de tela:
+
+@media (max-width: 850px) {
+
+ .contato__secao {
+ display: block;
+ margin-left: 1em;
+ }
+
+}
+
+@media (max-width: 622px) {
+
+ .familia-tupfeln {
+ float: none;
+ margin: 0 auto;
+ }
+
+}
+
+@media (max-width: 446px) {
+
+ .contato__subtitulo {
+ display: block;
+ margin-bottom: 0;
+ }
+
+ .contato__info {
+ padding-left: 5px;
+
+ font-size: .92em;
+
+ border-left: 2px solid lightgray;
+ }
+
+ .rodape {
+ font-size: .92em;
+ }
+
+}
+
+@media (max-width: 342px) {
+
+ .contato__info-descricao {
+ display: block;
+ margin-left: 1em;
+ }
+
+}Espero ter ajudado
Até mais