Site Responsivo com CSS<\/figcaption><\/figure><\/div>\n\n\n\nAo utilizar consultas de m\u00eddia, as apresenta\u00e7\u00f5es podem ser adaptadas a uma gama espec\u00edfica de dispositivos de sa\u00edda sem alterar o conte\u00fado em si. Em outras palavras, as consultas de m\u00eddia permitem que seu site tenha boa apar\u00eancia em todos os tipos de displays, desde smartphones at\u00e9 telas grandes.<\/p>\n\n\n\n
As consultas de m\u00eddia dependem do layout de seu website, por isso \u00e9 meio dif\u00edcil para mim fornecer-lhe um trecho de c\u00f3digo pronto para uso.<\/p>\n\n\n\n
Como j\u00e1 disse, voc\u00ea provavelmente ter\u00e1 que adaptar este c\u00f3digo um pouco para atender \u00e0s necessidades espec\u00edficas de seu website. Cole-o no arquivo .css de seu site.<\/p>\n\n\n\n
2 – M\u00eddias<\/h3>\n\n\n\n
Um layout responsivo \u00e9 o primeiro passo para um site totalmente responsivo. Agora, vamos nos concentrar em um aspecto muito importante de um site moderno: as m\u00eddias, como v\u00eddeos ou imagens.<\/p>\n\n\n\n
O c\u00f3digo CSS garantir\u00e1 que suas imagens nunca ser\u00e3o maiores do que o cont\u00eainer pai. \u00c9 super simples e funciona para a maioria dos websites. Observe que a diretiva de largura m\u00e1xima n\u00e3o \u00e9 reconhecida por navegadores mais antigos, como o IE6. Para funcionar, este trecho de c\u00f3digo tem que ser inserido em sua folha de estilo CSS.<\/p>\n\n\n\n
3 – Tipografia<\/h3>\n\n\n\n
O \u00faltimo passo deste tutorial \u00e9 definitivamente importante, mas muitas vezes \u00e9 negligenciado pelos desenvolvedores quando se trata de websites responsivos: Tipografia.<\/p>\n\n\n\n
At\u00e9 agora, a maioria dos desenvolvedores (inclusive eu!) usava pixels para definir o tamanho das fontes. Embora os pixels estejam ok quando seu website tem uma largura fixa, um website responsivo deve ter uma fonte responsiva. De fato, um tamanho de fonte responsiva deve estar relacionado \u00e0 largura de seu contentor pai, para que possa se adaptar \u00e0 tela do cliente.<\/p>\n\n\n\n
A especifica\u00e7\u00e3o CSS3 incluiu uma nova unidade chamada rems. Eles funcionam de forma quase id\u00eantica \u00e0 unidade em, mas s\u00e3o relativos ao elemento html, o que os torna muito mais f\u00e1ceis de usar do que os rems.<\/p>\n\n\n\n
Agora que voc\u00ea sabe como deixar o site responsivo com css, deixe seu coment\u00e1rio e veja outros artigos de wordpress e programa\u00e7\u00e3o<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"Como Deixar o Site Responsivo com CSS | Hoje, um site n\u00e3o deve ficar bem apenas em uma tela de desktop, mas tamb\u00e9m em tablets e smartphones. Um website \u00e9 responsivo se ele for capaz de se adaptar \u00e0 tela do cliente. Veja mais detalhes no Good Year EP. Como Deixar o Site Responsivo com […]<\/p>\n","protected":false},"author":2,"featured_media":1692,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"_links":{"self":[{"href":"https:\/\/goodyearep.com.br\/wp-json\/wp\/v2\/posts\/1618"}],"collection":[{"href":"https:\/\/goodyearep.com.br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/goodyearep.com.br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/goodyearep.com.br\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/goodyearep.com.br\/wp-json\/wp\/v2\/comments?post=1618"}],"version-history":[{"count":0,"href":"https:\/\/goodyearep.com.br\/wp-json\/wp\/v2\/posts\/1618\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/goodyearep.com.br\/wp-json\/wp\/v2\/media\/1692"}],"wp:attachment":[{"href":"https:\/\/goodyearep.com.br\/wp-json\/wp\/v2\/media?parent=1618"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/goodyearep.com.br\/wp-json\/wp\/v2\/categories?post=1618"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/goodyearep.com.br\/wp-json\/wp\/v2\/tags?post=1618"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}