{"id":47,"date":"2021-06-21T13:22:14","date_gmt":"2021-06-21T16:22:14","guid":{"rendered":"https:\/\/fariart.com.br\/blog\/?p=47"},"modified":"2023-05-04T12:37:16","modified_gmt":"2023-05-04T15:37:16","slug":"como-deixar-o-site-responsivo","status":"publish","type":"post","link":"https:\/\/fariart.com.br\/blog\/como-deixar-o-site-responsivo\/","title":{"rendered":"Como deixar o site responsivo?"},"content":{"rendered":"\n

Hoje vou te mostrar, de forma bem simples, como deixar o site responsivo.<\/p>\n\n\n\n

Esse post \u00e9 focado em quem j\u00e1 entende um pouco de CSS<\/strong> e quer saber como deixar o site responsivo<\/strong>. Se voc\u00ea n\u00e3o sabe nada sobre CSS, comece pelo post CSS para iniciantes: Estruturando uma p\u00e1gina<\/a><\/strong>.<\/p>\n\n\n\n

Desde que eu comecei a trabalhar com Web Design<\/strong>, sonho com essa possibilidade. S\u00f3 quem precisou recortar e estruturar um PSD com 1200px de largura em um monitor com a resolu\u00e7\u00e3o de 800×600 sabe o quanto \u00e9 frustrante.<\/p>\n\n\n\n

\"Imagem
Como deixar o site responsivo?<\/figcaption><\/figure>\n\n\n\n

Al\u00e9m disso, aquela barra horizontal no navegador \u00e9 detest\u00e1vel em qualquer situa\u00e7\u00e3o. A chegada do Web Design Responsivo<\/a> <\/strong>foi, sem d\u00favida, o melhor upgrade para os tempos de hoje e eu sou muito grato por n\u00e3o existir mais a barra horizontal.<\/p>\n\n\n\n

S\u00f3 que ainda hoje, em pleno 2021, alguns sites me surpreendem com a barra horizontal, deixando metade do site “para fora”. Por esse motivo, acredito que esse post ainda \u00e9 relevante, principalmente para quem est\u00e1 come\u00e7ando a se aventurar no CSS<\/strong>.<\/p>\n\n\n\n

Agora vamos ao que interessa…<\/p>\n\n\n\n

Como deixar o site responsivo?<\/h2>\n\n\n\n

Sabe aqueles sites que, quando voc\u00ea vai mudando a largura da janela, voc\u00ea percebe o conte\u00fado se adaptando? Ent\u00e3o, isso \u00e9 poss\u00edvel gra\u00e7as ao @media<\/strong>. Que serve para dizer ao navegador que as propriedades de determinada class<\/strong> ser\u00e3o substitu\u00eddas de acordo com a largura da p\u00e1gina. Por exemplo:<\/p>\n\n\n\n

\n
.content {width:910px;}\n\n@media (max-width: 480px) {\n\n.content {width:100%;}\n\n}<\/code><\/pre><\/div>\n<\/div><\/div>\n\n\n\n
A gente acabou de dizer para o navegador que quando a largura do dispositivo for menor que 480px, a class<\/strong> “content” mudar\u00e1 a largura de “910px” para “100%”.<\/p>\n\n\n\n
Simples assim. Voc\u00ea pode alterar quantas propriedades quiser e quantas classes<\/strong> quiser dentro do mesmo @media<\/strong>.<\/p>\n\n\n\n
Mas n\u00e3o esque\u00e7a de colocar a tag viewport<\/strong>, se n\u00e3o, quando voc\u00ea abrir o seu site em um dispositivo mobile<\/strong>, n\u00e3o vai funcionar o @media<\/strong>.<\/p>\n\n\n\n
<meta name="viewport" content="width=device-width, initial-scale=1.0"><\/code><\/pre><\/div>\n\n\n\n
Resumindo, \u00e9 isso. Se voc\u00ea quiser saber mais detalhes sobre o funcionamento do @media<\/strong>, leia o post “Como usar o media query no CSS?<\/a><\/a><\/a><\/strong>“.<\/p>\n\n\n\n
Se funcionou, n\u00e3o esque\u00e7a de comentar para ajudar outras pessoas que tiverem a mesma d\u00favida.<\/p>\n","protected":false},"excerpt":{"rendered":"
Hoje vou te mostrar, de forma bem simples, como deixar o site responsivo. Esse post \u00e9 focado em quem j\u00e1 entende um pouco de CSS e quer saber como deixar o site responsivo. Se voc\u00ea n\u00e3o sabe nada sobre CSS, comece pelo post CSS para iniciantes: Estruturando uma p\u00e1gina. Desde que eu comecei a trabalhar […]<\/p>\n","protected":false},"author":1,"featured_media":550,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[20,19,26],"tags":[15,14,25],"class_list":["post-47","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-desenvolvimento-web","category-html-desenvolvimento-web","category-responsivo","tag-css","tag-html","tag-responsivo"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/posts\/47","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/comments?post=47"}],"version-history":[{"count":22,"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/posts\/47\/revisions"}],"predecessor-version":[{"id":2224,"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/posts\/47\/revisions\/2224"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/media\/550"}],"wp:attachment":[{"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/media?parent=47"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/categories?post=47"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fariart.com.br\/blog\/wp-json\/wp\/v2\/tags?post=47"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}