{"id":133,"date":"2015-02-17T02:33:59","date_gmt":"2015-02-17T02:33:59","guid":{"rendered":"http:\/\/drcode.com.br\/blog\/?p=133"},"modified":"2019-08-08T00:56:11","modified_gmt":"2019-08-08T00:56:11","slug":"responsivo-css","status":"publish","type":"post","link":"https:\/\/drcode.com.br\/blog\/css\/responsivo-css\/","title":{"rendered":"Responsivo CSS"},"content":{"rendered":"<h2><a href=\"http:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2015\/02\/Media-query-css-css3-tutorial-How-to-write-responsive-css-tutorial.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-134\" src=\"http:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2015\/02\/Media-query-css-css3-tutorial-How-to-write-responsive-css-tutorial.jpg\" alt=\"Media-query-css-css3-tutorial-How-to-write-responsive-css-tutorial\" width=\"728\" height=\"446\" srcset=\"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2015\/02\/Media-query-css-css3-tutorial-How-to-write-responsive-css-tutorial.jpg 728w, https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2015\/02\/Media-query-css-css3-tutorial-How-to-write-responsive-css-tutorial-300x184.jpg 300w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/a><\/h2>\n<h2>Responsivo CSS<\/h2>\n<p>Voc\u00ea sabe que atualmente o celular e dispositivos moveis est\u00e3o sendo cada vez mais utilizados pelos usuarios, e com isso, voc\u00ea deve ter um site responsivo, que nada mais \u00e9 que um site que se adequ\u00e1 em todas as telas, de todos os tamanhos, e isso \u00e9 muito simples de fazer, \u00e9 possivel fazer com diversas formas, assim como com php, ou com media queries do css, vamos hoje aprender como se usa as media queries, que serve para fazer um responsivo css, vamos l\u00e1.<\/p>\n<h2>Media Queries<\/h2>\n<p>As media queries funcionam como um if da programa\u00e7\u00e3o, ou seja, se a tela for maior que x pixels, esta div vai ter x propriedades, se for menor que x pixels, vai ter tal propriedades, muito simples, mas vamos entender isso na pr\u00e1tica.<\/p>\n<pre class=\"line-numbers\"><code class=\"language-css\">@media screen and (max-width: 500px)\n{\n\tbody {background-color: red;}\n}<\/code><\/pre>\n<p>Aqui dizemos que se o screen que \u00e9 nossa tela, for menor que no maximo 500px vai ter o body com background color red.<\/p>\n<h2>Media Link CSS<\/h2>\n<p>Tamb\u00e9m temos o valor que colocamos na chamada do link css, est\u00e1 aqui<\/p>\n<pre class=\"line-numbers\"><code class=\"language-php\">&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"caminho\/arquivo.css\" media=\"all\" \/&gt;<\/code><\/pre>\n<p>Aqui temos os valores da media, que s\u00e3o esses<\/p>\n<ul>\n<li>all:\u00a0usado para que o c\u00f3digo CSS seja aplicado para todos os dispositivos.<\/li>\n<li>braile:\u00a0para dispositivos t\u00e1teis.<\/li>\n<li>embossed: para dispositivos que imprimem em Braille.<\/li>\n<li>handheld: para dispositivos de m\u00e3o, celulares e outros dispositivos deste perfil. Normalmente com telas pequenas e banda limitada.<\/li>\n<li>print: para impress\u00e3o em papel.<\/li>\n<li>projection: para apresenta\u00e7\u00f5es, como PowerPoint. Este valor foi inventado pelo pessoal da Opera.<\/li>\n<li>screen: para dispositivos com telas coloridas e alta resolu\u00e7\u00e3o.<\/li>\n<li>tv: para dispositivos como televisores, ou seja, com baixa resolu\u00e7\u00e3o, com boa quantidade de cores e scroll limitado.<\/li>\n<\/ul>\n<p>O ruim de usar este metodo \u00e9 que nem todos os dipositivos reconhecem o handheld, como por exemplo o IPhone da Apple, a melhor solu\u00e7\u00e3o \u00e9 utilizar as media queries, como citada acima, pois com ela podemos ter uma maior liberdade e controle do nosso c\u00f3digo de estilo para cada tela com cada um de seu tamanho.<\/p>\n<p>Voc\u00ea pode conferir uma lista mais completa sobre todos os tipos de medias clicando <a title=\"Media Queries\" href=\"http:\/\/www.w3schools.com\/cssref\/css3_pr_mediaquery.asp\">neste link<\/a><\/p>\n<p>Por enquanto \u00e9 isso, para qualquer d\u00favida, deixe um coment\u00e1rio, ou entre em contato comigo que eu irei ajuda-lo com seu problema.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Responsivo CSS Voc\u00ea sabe que atualmente o celular e dispositivos moveis est\u00e3o sendo cada vez mais utilizados pelos usuarios, e com isso, voc\u00ea deve ter um site responsivo, que nada mais \u00e9 que um site que se adequ\u00e1 em todas as telas, de todos os tamanhos, e isso \u00e9 muito simples de fazer, \u00e9 possivel [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":134,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[63,64,61,60,62,65],"class_list":["post-133","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-como-fazer-o-responsivo","tag-criar-site-responsivo","tag-media-css","tag-media-querie","tag-responsivo","tag-site-responsivo"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Responsivo CSS<\/title>\n<meta name=\"description\" content=\"Voc\u00ea sabe que atualmente o celular e dispositivos moveis est\u00e3o sendo cada vez mais utilizados, aprenda como fazer um responsivo css, aqui no DrCode\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/drcode.com.br\/blog\/css\/responsivo-css\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsivo CSS\" \/>\n<meta property=\"og:description\" content=\"Voc\u00ea sabe que atualmente o celular e dispositivos moveis est\u00e3o sendo cada vez mais utilizados, aprenda como fazer um responsivo css, aqui no DrCode\" \/>\n<meta property=\"og:url\" content=\"https:\/\/drcode.com.br\/blog\/css\/responsivo-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Dr Code\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pages\/Dr-Code\/1408258822807332\" \/>\n<meta property=\"article:author\" content=\"http:\/\/www.facebook.com.br\/Felipeourjake\" \/>\n<meta property=\"article:published_time\" content=\"2015-02-17T02:33:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-08-08T00:56:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2015\/02\/Media-query-css-css3-tutorial-How-to-write-responsive-css-tutorial.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"728\" \/>\n\t<meta property=\"og:image:height\" content=\"446\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Felipe Mello\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Felipe Mello\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/drcode.com.br\/blog\/css\/responsivo-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/drcode.com.br\/blog\/css\/responsivo-css\/\"},\"author\":{\"name\":\"Felipe Mello\",\"@id\":\"https:\/\/drcode.com.br\/blog\/#\/schema\/person\/7564c1ae5f763b633f00725927d47281\"},\"headline\":\"Responsivo CSS\",\"datePublished\":\"2015-02-17T02:33:59+00:00\",\"dateModified\":\"2019-08-08T00:56:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/drcode.com.br\/blog\/css\/responsivo-css\/\"},\"wordCount\":374,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/drcode.com.br\/blog\/css\/responsivo-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2015\/02\/Media-query-css-css3-tutorial-How-to-write-responsive-css-tutorial.jpg\",\"keywords\":[\"como fazer o responsivo\",\"criar site responsivo\",\"media css\",\"media querie\",\"responsivo\",\"site responsivo\"],\"articleSection\":[\"CSS 3\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/drcode.com.br\/blog\/css\/responsivo-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/drcode.com.br\/blog\/css\/responsivo-css\/\",\"url\":\"https:\/\/drcode.com.br\/blog\/css\/responsivo-css\/\",\"name\":\"Responsivo CSS\",\"isPartOf\":{\"@id\":\"https:\/\/drcode.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/drcode.com.br\/blog\/css\/responsivo-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/drcode.com.br\/blog\/css\/responsivo-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2015\/02\/Media-query-css-css3-tutorial-How-to-write-responsive-css-tutorial.jpg\",\"datePublished\":\"2015-02-17T02:33:59+00:00\",\"dateModified\":\"2019-08-08T00:56:11+00:00\",\"author\":{\"@id\":\"https:\/\/drcode.com.br\/blog\/#\/schema\/person\/7564c1ae5f763b633f00725927d47281\"},\"description\":\"Voc\u00ea sabe que atualmente o celular e dispositivos moveis est\u00e3o sendo cada vez mais utilizados, aprenda como fazer um responsivo css, aqui no DrCode\",\"breadcrumb\":{\"@id\":\"https:\/\/drcode.com.br\/blog\/css\/responsivo-css\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/drcode.com.br\/blog\/css\/responsivo-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/drcode.com.br\/blog\/css\/responsivo-css\/#primaryimage\",\"url\":\"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2015\/02\/Media-query-css-css3-tutorial-How-to-write-responsive-css-tutorial.jpg\",\"contentUrl\":\"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2015\/02\/Media-query-css-css3-tutorial-How-to-write-responsive-css-tutorial.jpg\",\"width\":728,\"height\":446},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/drcode.com.br\/blog\/css\/responsivo-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/drcode.com.br\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/drcode.com.br\/blog\/category\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Responsivo CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/drcode.com.br\/blog\/#website\",\"url\":\"https:\/\/drcode.com.br\/blog\/\",\"name\":\"Dr Code\",\"description\":\"Dicas para desenvoldores web\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/drcode.com.br\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/drcode.com.br\/blog\/#\/schema\/person\/7564c1ae5f763b633f00725927d47281\",\"name\":\"Felipe Mello\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/2dea5d49ac8216203b8c44bcd790eb8b21b19554180cd1dd0dd3debe01da41bf?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2dea5d49ac8216203b8c44bcd790eb8b21b19554180cd1dd0dd3debe01da41bf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2dea5d49ac8216203b8c44bcd790eb8b21b19554180cd1dd0dd3debe01da41bf?s=96&d=mm&r=g\",\"caption\":\"Felipe Mello\"},\"description\":\"Felipe Mello, desenvolvedor desde 2014. Sendo programador Back-end, Front-end, e Designer. Conhecedor de PHP, CakePHP, Laravel, React, Angular, Node, jQuery\",\"sameAs\":[\"http:\/\/www.facebook.com.br\/Felipeourjake\",\"https:\/\/instagram.com\/felipeourjake\",\"https:\/\/www.linkedin.com\/in\/felipe-melo-62837aa7\/\",\"https:\/\/x.com\/felipeourjake\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Responsivo CSS","description":"Voc\u00ea sabe que atualmente o celular e dispositivos moveis est\u00e3o sendo cada vez mais utilizados, aprenda como fazer um responsivo css, aqui no DrCode","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/drcode.com.br\/blog\/css\/responsivo-css\/","og_locale":"pt_BR","og_type":"article","og_title":"Responsivo CSS","og_description":"Voc\u00ea sabe que atualmente o celular e dispositivos moveis est\u00e3o sendo cada vez mais utilizados, aprenda como fazer um responsivo css, aqui no DrCode","og_url":"https:\/\/drcode.com.br\/blog\/css\/responsivo-css\/","og_site_name":"Dr Code","article_publisher":"https:\/\/www.facebook.com\/pages\/Dr-Code\/1408258822807332","article_author":"http:\/\/www.facebook.com.br\/Felipeourjake","article_published_time":"2015-02-17T02:33:59+00:00","article_modified_time":"2019-08-08T00:56:11+00:00","og_image":[{"width":728,"height":446,"url":"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2015\/02\/Media-query-css-css3-tutorial-How-to-write-responsive-css-tutorial.jpg","type":"image\/jpeg"}],"author":"Felipe Mello","twitter_misc":{"Escrito por":"Felipe Mello","Est. tempo de leitura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/drcode.com.br\/blog\/css\/responsivo-css\/#article","isPartOf":{"@id":"https:\/\/drcode.com.br\/blog\/css\/responsivo-css\/"},"author":{"name":"Felipe Mello","@id":"https:\/\/drcode.com.br\/blog\/#\/schema\/person\/7564c1ae5f763b633f00725927d47281"},"headline":"Responsivo CSS","datePublished":"2015-02-17T02:33:59+00:00","dateModified":"2019-08-08T00:56:11+00:00","mainEntityOfPage":{"@id":"https:\/\/drcode.com.br\/blog\/css\/responsivo-css\/"},"wordCount":374,"commentCount":0,"image":{"@id":"https:\/\/drcode.com.br\/blog\/css\/responsivo-css\/#primaryimage"},"thumbnailUrl":"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2015\/02\/Media-query-css-css3-tutorial-How-to-write-responsive-css-tutorial.jpg","keywords":["como fazer o responsivo","criar site responsivo","media css","media querie","responsivo","site responsivo"],"articleSection":["CSS 3"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/drcode.com.br\/blog\/css\/responsivo-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/drcode.com.br\/blog\/css\/responsivo-css\/","url":"https:\/\/drcode.com.br\/blog\/css\/responsivo-css\/","name":"Responsivo CSS","isPartOf":{"@id":"https:\/\/drcode.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/drcode.com.br\/blog\/css\/responsivo-css\/#primaryimage"},"image":{"@id":"https:\/\/drcode.com.br\/blog\/css\/responsivo-css\/#primaryimage"},"thumbnailUrl":"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2015\/02\/Media-query-css-css3-tutorial-How-to-write-responsive-css-tutorial.jpg","datePublished":"2015-02-17T02:33:59+00:00","dateModified":"2019-08-08T00:56:11+00:00","author":{"@id":"https:\/\/drcode.com.br\/blog\/#\/schema\/person\/7564c1ae5f763b633f00725927d47281"},"description":"Voc\u00ea sabe que atualmente o celular e dispositivos moveis est\u00e3o sendo cada vez mais utilizados, aprenda como fazer um responsivo css, aqui no DrCode","breadcrumb":{"@id":"https:\/\/drcode.com.br\/blog\/css\/responsivo-css\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/drcode.com.br\/blog\/css\/responsivo-css\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/drcode.com.br\/blog\/css\/responsivo-css\/#primaryimage","url":"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2015\/02\/Media-query-css-css3-tutorial-How-to-write-responsive-css-tutorial.jpg","contentUrl":"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2015\/02\/Media-query-css-css3-tutorial-How-to-write-responsive-css-tutorial.jpg","width":728,"height":446},{"@type":"BreadcrumbList","@id":"https:\/\/drcode.com.br\/blog\/css\/responsivo-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/drcode.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/drcode.com.br\/blog\/category\/css\/"},{"@type":"ListItem","position":3,"name":"Responsivo CSS"}]},{"@type":"WebSite","@id":"https:\/\/drcode.com.br\/blog\/#website","url":"https:\/\/drcode.com.br\/blog\/","name":"Dr Code","description":"Dicas para desenvoldores web","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/drcode.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/drcode.com.br\/blog\/#\/schema\/person\/7564c1ae5f763b633f00725927d47281","name":"Felipe Mello","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/2dea5d49ac8216203b8c44bcd790eb8b21b19554180cd1dd0dd3debe01da41bf?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2dea5d49ac8216203b8c44bcd790eb8b21b19554180cd1dd0dd3debe01da41bf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2dea5d49ac8216203b8c44bcd790eb8b21b19554180cd1dd0dd3debe01da41bf?s=96&d=mm&r=g","caption":"Felipe Mello"},"description":"Felipe Mello, desenvolvedor desde 2014. Sendo programador Back-end, Front-end, e Designer. Conhecedor de PHP, CakePHP, Laravel, React, Angular, Node, jQuery","sameAs":["http:\/\/www.facebook.com.br\/Felipeourjake","https:\/\/instagram.com\/felipeourjake","https:\/\/www.linkedin.com\/in\/felipe-melo-62837aa7\/","https:\/\/x.com\/felipeourjake"]}]}},"views":5250,"_links":{"self":[{"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/posts\/133","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/comments?post=133"}],"version-history":[{"count":1,"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/posts\/133\/revisions"}],"predecessor-version":[{"id":135,"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/posts\/133\/revisions\/135"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/media\/134"}],"wp:attachment":[{"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/media?parent=133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/categories?post=133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/tags?post=133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}