Transfromando html em responsivo.

[samora.oliveira 2]

Bom dia a todos!

 

Estou precisando trasnformar meu html e css em resposivo, mas não preciso de uma ajuda e de alguma explicação sobre o código "@media". Por favor, podem me ajudar e me explicare como funciona este @media?

 

Agradeço desde já!

 

 

Perdão, digitei o título errado, é transformando!

[rikaschmitt 54]

Opa.

Aqui tem um site que explica bem detalhado sobre o assunto e alguns exemplos.

[lorainevilches 1]

O rikaschimitt mandou muito bem no link, é uma ótima referencia para tirar as pequenas dúvidas e ensinar a galera...

 

Samora, eu crio sites responsivos sempre utilizando algum framework como Bootstrap e depois eu crio um arquivo .css próprio para adaptar os layouts de uma forma mais harmoniosa...

 

O '@media' que você questiona, ele serve como um atributo para cada tamanho declarado em sua folha de estilo. Exemplo:

 

@media (min-width: 1200px){

/*Colocar o seu css aqui para uma largura minima de 1200px*/

}

 

Então eu tenho algumas larguras pre-determinadas (como mobile, tablet, desktop, etc), e ai através dela eu adiciono as classes e os atributos referentes a este tamanho específico...

 

Espero que tenha ajudado!

[Marco Bruno 19]

Boa tarde, Galera.

 

Eu gosto muito do post do Sérgio Lopes sobre responsivo:

http://sergiolopes.org/responsive-web-design/

 

[]'s

Marco Bruno.