Como deixar qualquer site responsivo - Media Queries
É imprescindível que uma página seja adaptável aos diversos tamanhos de tela existentes. Isso porque cada vez mais pessoas acessam os sites de seus dispositivos móveis como celulares e tablets. E é um critério para indexação no Google.
Fala Devs!
Um artigo de utilidade pública para quem está iniciando nesse mundo de desenvolvimento web.
Se você é autodidata, como eu, e esta estudando esse universo por conta própria talvez possa estar com alguma dificuldade nesse sentido. Mesmo que já tenha aprendido a desenvolver uma bela página web.
A princípio pode parecer um "bixo de sete cabeças" imaginar como fazer o site que você criou ficar responsivo. Mas a boa notícia é que se você já tem conhecimento suficiente em HTML e CSS para criar uma página web o processo é bem fácil, Juro!
Por incrível que pareça quando eu estava aprendendo como fazer, não achei nenhum artigo nesse "Google de meu Deus" que tivesse com todas as informações completas e que explicasse o que fazer passo-a-passo. Eu tive que juntar uma informação dali, outra daqui e testar, vendo o que alterava e o que acontecia em cada detalhe que eu editava.
É a coisa mais fácil do mundo, mas quando a gente não sabe e não encontra quem ensine a impressão que dá é que não vamos conseguir...
Por isso eu resolvi presentear vocês com esse artigo. Me valorizem hein!
Vamos lá?
Como deixar qualquer site responsivo - Media Queries Na Prática!
<meta content='width=device-width' name='viewport'/>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<meta content='IE=edge' https-equiv='X-UA-Compatible'/>
Geralmente é uma página chamada style.css. Porém dependendo da forma como desenvolveu o CSS da página poderá ser encontrado dentro da mesma index.html junto com todo o resto do código. Nesse caso ele fica entre as tags <style></style>.Se você esta desenvolvendo algum template para blogger o CSS fica entre as tags <b:skin></b:skin>
/* MEDIA QUERIES- DEFINE A RESPONSIVIDADE----------------------------------------------- */@media screen and (max-width : 1152px) {}@media screen and (max-width : 1024px) {}@media screen and (max-width : 900px) {}@media screen and (max-width : 768px) {}@media screen and (max-width : 736px) {}@media screen and (max-width : 600px) {}@media screen and (max-width : 480px) {}@media screen and (max-width : 375px) {}@media screen and (max-width : 360px) {}@media screen and (max-width : 320px) {}
Se você define que o blog a partir da resolução 1024px irá se comportar de determinada maneira isso significa que esse comportamento vai se manter até a próxima media queries definida. Se nada for definido, valerá o que estiver na media mais próxima.
.page-de-posts .container{align-content: center;max-width: 1100px;display:flex;justify-content: space-between;margin-left: auto;margin-right: auto;}.sidebar{max-width: 240px;width: 100%;margin:0 10px;padding: 20px 0;}
.page-de-posts .container{ padding: 50px 50px; align-content: center; max-width: 1100px; display:flex; flex-direction: column; justify-content: space-between; margin-left: auto; margin-right: auto; }.sidebar{ max-width: 480px; width: 100%; margin:0; padding: 20px 0; }}
Nenhum comentário:
Postar um comentário