Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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!
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!
Boa tarde, Galera.
Eu gosto muito do post do Sérgio Lopes sobre responsivo:
http://sergiolopes.org/responsive-web-design/
[]'s
Marco Bruno.
Opa.
Aqui tem um site que explica bem detalhado sobre o assunto e alguns exemplos.