Terminei minha interface. Legal, mas e agora?

[victor2dm 2]

Bom, estou fazendo meu primeiro site e tals. Mãããs, como sabemos, não basta só fazer a interface inicial, temos que adaptar aos redimensionamentos da janela do navegador, diferentes tipos de resolução, pensar na responsividade, entre outras coisas.

 

Bom, venho pedir a ajuda de quem já trabalhou com media queries, fez sites responsivos com sucesso e tudo mais.

Meu layout inicial está pronto, mas como num tudo é maravilha, claro que com redimensionamentos do navegador haverá alguma quebra.

 

um exemplo é o menu. Tenho o container máximo do site definido em 1170px, sim, utilizo medidas relativas como % e em no resto. Em janela maximizada, tudo bem, agora redimensionando o navegador aparece o primeiro problema em 1208px.

 

 

 

Observe a quebra do menu, com o "XX XX XXXX-XXXX" ali dentro do banner, e a falta de margens ali no logo, que passa a ficar totalmente colado a borda.

 

 

Outro problema: O Banner ali é 100% da altura e largura da página. Ok, com janela máxima irá ficar totalmente lindo, agora diminuindo a altura ...

 

Olha o "Saiba mais" saindo do container e ficando ali junto com o "Conte comigo" dentro do background cinza.

 

enfim, acho que deu mais ou menos pra passar o que quero. Não acredito que seja necessário reescrever o site todo para cada Media query, mas sim fazer algumas adaptações. Mas, prefiro ter a ajuda de quem conhece do assunto.

 

Agradeço desde já.

[André do Vale 76]

Você mesmo tem respondido seu problema. Utilize adequadamente a tag de viewport, e trabalhe os @media conforme necessário.

 

E sim, de acordo com os elementos, talvez seja necessário reescrever grande parte do CSS, haja vista que você não produziu o CSS já pensando nas telas menores antes.

 

Leia um pouco sobre o assunto. http://tableless.com.br/design-responsivo-na-pratica-do-rascunho-ao-digita/

 

Sugestão: comece do menor para o maior (mobile first).

[victor2dm 2]

Eu cheguei a pensar em fazer mobile-first, mas sei lá, eu acho mais confuso (Apesar de ter os mockups prontos e tudo mais). Bom, não fiz nenhum projeto do tipo ainda, mas escrever pelo menos 4 media queries diferentes, oh god ...

Obrigado pela dica, não marcarei como resolvido ainda pois quero ver o que outros membros dirão sobre.