![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image1.jpg\")
Olá! Bem-vindo ao curso online de Web Design Responsivo do Alura. Nesse curso, nós vamos\nver um pouco sobre como trabalhar com a web, pensando principalmente em novos dispositivos -\ncomo dispositivos móveis de smartphones, tablets -, mas também em desktop, e em como fazer para os sites adaptarem-se para essas diferentes possibilidades de hoje em dia.
\nQuando nós trabalhamos com design responsivo, pensamos em atacar os dispositivos móveis.\nGeralmente, a primeira pergunta que fazemos é: eu quero um site mobile ou um com design responsivo?\nO que eu quero dizer com isso?\nBom, veja, por exemplo, o site do UOL:
\n![](\"https://cdn3.gnarususercontent.com.br/responsivo/capitulo1-imagem-9.png\")
\n\nAbri o UOL aqui no meu desktop (você já deve ter visto essa página alguma vez) e eu tenho várias nóticias, colunas, um menu grande etc. Se eu abrir o mesmo site, agora em um mobile, eu vou ver essa tela aqui:
\n![](\"https://cdn3.gnarususercontent.com.br/responsivo/01.01_001_imagem10.png\")
\n\nRepare que tenho agora um site adaptado para mobile, bem diferente daquele para desktop, mas, principalmente, eu tenho até um endereço novo: m.uol.com.br.\nEsse é um claro exemplo de um grande portal do Brasil. Há vários outros possíveis, mas, para nós vermos um contraponto de qual seria a outra alternativa, ainda nesse assunto de notícias, peguei um outro. Por exemplo, o site do Boston Globe:
\n![](\"https://cdn3.gnarususercontent.com.br/responsivo/capitulo1-imagem-11.png\")
\n\nbostonglobe.com, um site americano de notícias. Aqui, estou abrindo ele no desktop. Aliás, peguei-o, não por que não temos bons exemplos\nno Brasil, mas porque esse site é famoso nessa parte de responsivo, por ter sido um dos grandes primeiros projetos com responsivo no mundo. Inclusive, a pessoa que criou o termo web design responsivo, Ethan Marcotte, participou desse projeto, então ele acabou ficando famoso por isso.\nMas, veja bem, esse é um site em sua versão desktop. E o que acontece se o abro no tablet? Dê uma olhada:
\n![](\"https://cdn3.gnarususercontent.com.br/responsivo/capitulo1-imagem-12.png\")
\n\nEu tenho o mesmo site, no mesmo endereço, com a mesma URL, mesmo design e mesmo código. A diferença é que ele se adapta a essa resolução um pouco menor.\nEntão, aqui, você vê, por exemplo, duas notícias de coluna.\nSe eu abrir no celular, agora:
\n![](\"https://cdn3.gnarususercontent.com.br/responsivo/capitulo1-imagem-13.png\")
\n\nDando uma olhada vê-se que é o mesmo site novamente, mesma URL, mesmo endereço e mesma HTML. Só que tenho uma coluna de conteúdo, um menu compactado etc. Isso é design responsivo.
\nEntão, estamos nessa dúvida: se fazemos um site mobile específico, como vimos no caso do UOL, ou um design responsivo, como nesse caso do Boston Globe.
\nMais um exemplo:
\n![](\"https://cdn3.gnarususercontent.com.br/responsivo/01.01_002_imagem14.png\")
\n\nOlhe a página do site da Caelum que peguei. Gravei, inclusive, um vídeo para você dar uma olhada de como o site se adapta com as diferentes resoluções. Voce vê que uma coluna viram duas, e então viram três. Você percebe as fotos aumentando de tamanho; e o texto e o menu adaptando-se. Tudo isso mostra a ideia de que a mesma página adapta-se a diferentes resoluções, inclusive, a vários intervalos dessas resoluções, como mostrei nesse vídeo.
\nEntão, pensando de novo naquela dúvida - site mobile ou design responsivo? -, \nessa pergunta tem um detalhe que queria discutir. Quando falamos de mobile, o que é mobile exatamente?
\nVamos tentar definir mobile. Quando você pensa em fazer um site mobile, uma página para dispositivos móveis, o que separa esses dispositivos de outros que não são mobile?
\nVamos pensar. Seria uma tela pequena?\nEntão, tendo uma tela pequena, quer dizer que ele é um dispositivo móvel?\nBom, se eu tiver um tablet, ele não é móvel? \nNão é bem isso, certo?
\nVamos tentar de novo. Talvez seja a portabilidade.\nTenho um dispositivo que posso usar em qualquer lugar: na praça, na rua. Bom, então, se eu levar meu notebook para praça, ele seria mobile? \nTalvez não.
\nVamos pensar. Talvez, então, seja as redes móveis. \nO fato de eu poder acessar meu dispositivo através de 3G ou 4G define que é mobile. Bom, assim, se eu comprar aquele 3G USB de plugar no computador, eu estou em um mobile?\nÉ, veja bem. Talvez não.
\nEntão, vamos tentar mais um: touch screen.\nTalvez o que define mobile seja uma tela de touch. Então, se você tem um computador híbrido, com Windows 8, por exemplo, os primeiros computadores com touch, você está em um dispositivo mobile? \nAí você pensa: então, não sei. É difícil.
\nA grande questão, na verdade, é que não existe mobile. Tentar fazer essa separação entre o que é e o que não é mobile é problemática. Existe, claro, os extremos. Se mostrar um smartphone pequenininho, você falará para mim que ele é um mobile; se mostrar um computador desktop grandão, ele, obviamente, não será mobile. Mas a questão é que, no meio, entre esses dois dispositivos, existem várias possibilidades, e elas são díficeis de definirmos.\nÀs vezes você tem um tablet tão grande quanto um notebook, mas às vezes você tem um notebook híbrido que vira tablet. Às vezes você tem touch screen, às vezes não, como pode ser que tenha também 3G, como também não.
\nEnfim. A grande questão é que não interessa, não importa. Não existe mobile, logo não nos interessa essa divisão. O que existe são vários dispositivos diferentes, com características diferentes e nós queremos que o nosso site suporte todos eles.
\nEntão, se voltarmos para aquela nossa questão, o design responsivo é a única maneira de atingir todos esses dispositivos diferentes através de uma única web, uma única página.
\nPodemos tentar fazer um site mobile separado, como vimos no exemplo do UOL, porém, a grande questão é: onde passaríamos o traço? Onde defino o que é mobile e o que não é?\nIsso é o que acabamos de ver. Essa linha é muito tênue e complicada de ser definida.
\nAí você decide trabalhar com design responsivo. Mas, quais são os princípios? \nO grande coração do design responsivo é o uso de layout fluido. \nO que significa isso?
\n![](\"https://cdn3.gnarususercontent.com.br/responsivo/capitulo1-imagem-29.png\")
\n\nPeguei essa página do site da Caelum, por exemplo. Uma página simples, que serve para os usuários entrarem em contato. Temos lá um menu, um banner e duas colunas de conteúdo: uma com um formulário e outra com alguns endereços da Caelum.
\nUma página com layout fixo, não fluido. Se você for dar uma olhada, tenho medidas em pixels para cada uma dessas partes do texto do site:
\n![](\"https://cdn3.gnarususercontent.com.br/responsivo/capitulo1-imagem-30.png\")
\n\nVeja que coloquei os pedaços mais importantes, em especial o banner. Vou colocá-lo em um grid de 960 pixels, e depois dividir o conteúdo em duas colunas, que coloquei em 470 pixels, certo?
\nA grande questão é que estou definindo as coisas em pixels. Quando eu faço isso, como se fazia bastante antigamente na web, eu estou indo contra a questão de design responsivo, impedindo a página de se adaptar.
\nPreciso transformar tudo isso em design definido. Ou seja, usar medidas flexíveis. Como assim?\nA medida flexível mais importante é a porcentagem.\nQuando trabalho com porcentagens, é possível fazer meu site se adaptar em diferentes resoluções.\nVamos voltar lá no exemplo.
\n\n\nSeria eu olhar para esse mesmo grid, e em vez de enxergar os pixels, ver porcentagens. Por exemplo, quero dividir em duas colunas, então em vez de colocar 470px, colocar isso em porcentagens.
\n![](\"https://cdn3.gnarususercontent.com.br/responsivo/capitulo1-imagem-34.png\")
\n\nColoquei 49%, pois dividi no meio e deixei um espacinho. Logo, se você quer dividir duas colunas, fará 50% para cada lado; se forem três colunas, 33%; e se forem quatro, 25%.
\nEnfim. A questão é parar de pensar em pixels e começar a pensar nas proporções do design.\nEssa é a grande mudança do design responsivo quando falamos de layout fluido.\nÉ parar de pegar aquela medida em pixel exata - que você pega, por exemplo, no Photoshop e coloca no CSS -, e começar a enxergar no seu design, naquela sua criação, as proporções naturais entre os conteúdos. Então, se há duas colunas, obviamente é a proporção de 1 pra 1, 50% pra cada lado. E você transforma em código depois.
\nVamos pegar, por exemplo, de novo essa nossa página:
\n\n\nJá pensando em porcentagens, como é que eu decodificaria isso?\nEntão, eu preciso do código. Se eu tiver a classe banner, que representa o banner lá de cima, ele teria a largura de 100%:
\n.banner {\n width: 100%;\n}Se você for trabalhar com as duas colunas, teremos a coluna do formulario, com a largura de 49%. Darei um float left para ela ficar na esquerda.
\n.formulario{\n width: 49%;\n float: left;\n}E aí eu coloco agora a coluna das unidades, com um width de 49% e também com float right para ficar na direita.
\n.unidades {\n width: 49%;\n float: right;\n}Um código CSS simples que não tem grande segredo, mas que fará nós deixarmos essa nossa página com um layout mais fluido, usando as medidas flexíveis.\nEssa é a grande questão.
\nBom, o que é que vimos nessa primeira aula de design responsivo, nesse começo de teoria?\nVimos que vamos trabalhar com design responsivo, principalmente, porque não há outra alternativa. Se quiser fazer um site mobile, eu não consigo traçar a diferença entre mobile e o resto. E a questão é que isso só "vai piorar" para o futuro. Teremos, cada vez mais, dispositivos com características diferentes. Logo, o design responsivo é a única alternativa, já que não existe mobile.
\nVimos também que para implementar isso, precisamos trabalhar com layout fluido. E o grande coração dele são as medidas flexíveis, em especial as porcentagens, que vimos no exemplo.
\nE a grande mudança do pensamento quando se está começando com design responsivo é começar a olhar para o seu design e a pensar nas proporções dele. É você conseguir enxergar em seu projeto as proporções entre os desenhos das coisas: entre as colunas e os outros elementos; e não mais em pixels fixos.
\nTemos alguns exercícios agora e continuaremos na próxima aula.
\n","videoUrl":"https://gnarus-video.4986a99d4a6ebf7ab87ee6461d95b58b.r2.cloudflarestorage.com/alura/105792073-sd.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20260421T032942Z&X-Amz-SignedHeaders=host&X-Amz-Credential=099e678757b68a07f650f27240529bce%2F20260421%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Expires=604800&X-Amz-Signature=63210606551b3aa5389521f7911a7bcd7b5999cae12b2fcc2e71be6fbe9fbef9"},{"sectionName":"Mais Design Fluído","taskName":"Mais Design Fluído","transcription":"LAYOUT FLUÍDO
\nContinuando nossos estudos, agora de design responsivo, a gente vai se aprofundar um pouco nas questões do layout fluído, que é justamente o grande pilar da responsividade de nossas [páginas],certo? Para isso, peguei alguns exemplos pra gente dar uma estudada.
\nMEDIDAS FLEXÍVEIS
\nPrimeiro a gente tem que lembrar o seguinte: que o ponto central do layout fluído são as medidas flexíveis. Então vamos ver várias medidas agora e como elas ajudam a implementar esse tipo de coisa. Lembrando que a porcentagem é a principal.
\nMas como funcionam as porcentagens na web exatamente? Bom, pegue esse exemplo:
\n
Imaginemos uma página com um body e dentro dessa página eu criei um elemento chamado de main. E aí, no CSS, estou encurtando o código aqui, eu coloco que a largura dele é de 90%. O que isso significa na prática? É 90% do que? Do body, da página inteira.
Se fôssemos colocar isso graficamente, significa, se eu centralizar esse elemento na tela que ele ocupa 90%,
\n![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image2.jpg\")
e tem margens de 5% dos dois lados.
\n![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image3.jpg\")
Em números, o que isso significa? Se abrimos em um desktop, por exemplo, com resolução de 1280 pixels,
![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image4.jpg\")
isso significa que esse nosso main vai ter 1152 pixels, 90%,
![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image5.jpg\")
e cada uma das duas margens com 54 pixels:
\n![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image6.jpg\")
Mas como estamos trabalhando com porcentagens, a grande questão é que isso deve se adaptar a diferentes resoluções.
\nEntão, se abrirmos em uma resolução menor, de 360 pixels, por exemplo,
\n![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image7.jpg\")
Isso significa que o main, vai ter 324 pixels e as margens terão 18 pixels, cada.
![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image8.jpg\")
Ou seja, tudo é pixel, claro, a quantidade de pixels que será desenhada na tela. No entanto, por estarmos usando a porcentagem na definição do elemento, teremos esse cálculo feito automaticamente, conforme a resolução que estiver sendo usada.
Voltando para o main, vamos colocar dois elementos para definir duas colunas diferentes. Por exemplo,
![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image9.jpg\")
Para definir duas colunas, fácil, 50%. Mas aqui tem um ponto importante: cuidado ao definir dois elementos dentro do main, dividindo o meio, é 50% do main e não 50% do body. O que se quer dizer com isso? Não se coloca, por exemplo, 45%, o que seria a metade de 90%, mas sim, coloca-se 50% do body. Isso quer dizer que, para se chegar ao tamanho final da section, o navegador vai calcular o tamanho do body, o tamanho do main e o tamanho da section, multiplicando as porcentagens de cada um deles.
Por isso é fácil, se eu quiser dentro de cada uma dessas sections um grid de três colunas, que estão dentro de um elemento composto de duas colunas, dentro de outro elemento que é 90%, parece meio confuso, mas não, é fácil: três colunas, 33%:
![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image10.jpg\")
Então, divide-se em 33% cada um desses elementos. Ou seja, estamos usando porcentagens para definir os elementos trabalhados.
\nAs porcentagens podem ser utilizadas também em outros contextos, em especial, o font-size.
FONT SIZE %
\nNo font-size as porcentagens têm outro significado. Antes falávamos de significado da largura dos elementos, agora tem-se uma font-size ou porcentagem que quer dizer outra coisa.
Tem-se aqui um exemplo:
\n![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image11.jpg\")
É o mesmo body com alguns outros elementos lá dentro. Imagine um elemento main onde se define um font-size de 125%. Depois se adiciona um parágrafo, sem nenhum font-size, ele vai herdar o font-size. Depois coloca-se uma section com font-size de 90% e um título com font-size de 150%, lá dentro da section, e mais dois parágrafos sem font-size:
![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image12.jpg\")
Partindo deste caso, a questão é: qual será o tamanho das fontes de cada um desses elementos? Quando se fala em 125%, isto é em relação a quê?
\nO grande ponto é o seguinte: quando se usa porcentagem nos font-size, está se usando uma multiplicação com relação ao font-size do elemento pai, ou seja, se colocarmos 125% no main, estamos dizendo que ele é 125% maior do que a fonte do body.
Mas aí, pode-se argumentar que o body não teve fonte. Se não se colocar nenhuma fonte no body, assume-se que fonte-padrão do navegador, que vale na tag HTML, na tag]body`, é 16 pixels.
E então faremos as contas levando isso em consideração: 1,25 vezes 16 chega-se em 20 pixels e o parágrafo herda esses 20 pixels, porque não tem nenhuma definição de fonte.
\n![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image13.jpg\")
Aqui, uma definição importante ao chegar na section: é 90% do valor que temos no elemento-pai, ou seja, 90% dos 20 pixels, daí o resultado de 18 pixels. E aí, novamente, quando se vai calcular no h1, é 150 vezes o elemento-pai imediato, que é 18 pixels, resultando nos 27 pixels, e o parágrafo herdará os 18 pixels.
![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image14.jpg\")
Então, estamos trabalhando com porcentagem, multiplicando os elementos-pai até chegar a um valor em pixel, no valor real, que será desenhada aquela fonte na tela.
Um ponto importante: por que falamos que a porcentagem, nesse caso das fontes, é uma medida flexível? Porque aqui tem o seguinte detalhe: se mudamos a fonte inicial de 16 pixels lá no body, todo o cálculo que é feito em porcentagem embaixo, mudará também. Ou seja, é muito fácil se alterar algum elemento e causar uma alteração em cascata na página. Isso é bem interessante em uma página responsiva, por exemplo, para evitar a redefinição do tamanho de cada um dos elementos o tempo todo.
Vamos ver um caso na figura seguinte:
\n![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image15.jpg\")
Se trocarmos para 20 pixels lá no body, pode-se perceber que todos os elementos trocaram: o main fica com 25 pixels, a section fica com 22 pixels, o h1 com 33 pixels e assim por diante. Tudo é recalculado automaticamente.
Por isso, fala-se que a porcentagem na fonte facilita a mudança em um lugar somente, a qual será replicada em cascata, aumentando-se proporcionalmente todas as fontes da página, alterando-se apenas a fonte do body.
Outro ponto interessante. Veja-se a figura a seguir:
\n![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image16.jpg\")
Substitui-se as porcentagens para em, que é outro tipo de medida utilizada nas fontes. Repare que foi mudado apenas um detalhe no main: em vez de 125%, foi utilizado 1.25em. O font-size da section, transformou-se em .9em e no h1, 1.5em. O mesmo valor usado em porcentagem, é utilizado em em. Notando que o cálculo final em pixels é o mesmo.
FONT-SIZE: 120% = FONT-SIZE: 1.2em
\nIsso quer dizer que a porcentagem e o em têm o mesmo significado, ou seja, 120% e 1.2em querem dizer a mesma coisa.
Esse raciocínio vale quando se está utilizando font-size, ou seja, nas fontes a porcentagem e o em têm o mesmo significado. Isso é importante porque se a porcentagem é utilizada nas larguras, como visto anteriormente, está claro que seu significado será diferente, quando, então, indicará a largura do elemento-pai.
Interessante é que o em pode ser utilizado fora dos font-size, quando então pode-se ver a diferença entre as duas medidas.
![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image17.jpg\")
Por exemplo, na Fig.20, onde se tem um body, um main e alguns parágrafos lá dentro. Repare que as margens são definidas e o width do parágrafo utilizando em.
O que significa trabalhar com em? Isso quer dizer que uma margem de 1em é proporcional ao texto, ao tamanho da fonte, que estiver sendo utilizada no elemento em determinado momento.
Lembre-se que o valor-padrão é 16 pixels, no caso de não haver nada definido.
\nAssim, tem-se uma margem proporcional ao tamanho da fonte. A mesma coisa ao width: se o max-with é 40em, seu aumento será proporcional ao aumento da fonte.
Isso é interessante porque, se repararmos, a margem entre os parágrafos deve mudar proporcionalmente ao tamanho do texto, afinal é uma medida textual. Se tivermos uma fonte muito grande, a margem será maior. O [line-date] deverá aumentar também, assim como o tamanho da linha. Ou seja, sempre que tiver coisas que são relacionadas ao tamanho do texto, à proporção que tem a ver com tamanho do texto, o em é uma boa medida para isso.
E teremos o mesmo efeito de antes:
\n![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image18.jpg\")
Se trocarmos o em do elemento-pai, por exemplo, o main para 1.5em, o tamanho de todos os elementos seguintes é afetado internamente. Nota-se que o cálculo do em é proporcional, como visto antes. A grande diferença é que o em, nesse caso, está sendo utilizado em elementos que não são apenas font-size, mas são propriedade, como margem e width, que devem ser proporcionais ao parágrafo e ao texto que se está utilizando. Isso é o nosso em.
A aplicação de tudo isso na prática, porcentagem, em, exige alguns detalhes a mais, os quais serão demonstrados a seguir, que devem ser tratados antes de partirmos para os exercícios, aplicando as porcentagens em alguns cenários mais interessantes.
TÉCNICAS DE DESIGN FLEXÍVEL
\n![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image19.jpg\")
Imagine, por exemplo, uma página já construída, a qual se aplica a vários dispositivos, desde o pequeno celular até um computador, um notebook ou um computador maior, tudo isso funcionando com width de 100%, para ocupar largura completa.
![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image20.jpg\")
Porém, pretende-se colocar a página em uma TV gigantesca, com 4K, com 3800 pixels de largura.
\n![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image21.jpg\")
O width de 100% vai funcionar, ocupará tudo, mas talvez não fique tão interessante, tão bonito, por quê? Ficará meio largo demais, pois a TV não é tão otimizada para o tamanho do site que fizemos.
Está claro que é possível ajustar o site para ser utilizado em todos os meios possíveis, desde um minúsculo smart em relógios, até uma TV gigantesca, enfim, porém isso nem sempre é prático. Pode ser que se queira limitar até onde o site fique responsivo, isto é, a face [...] possui uma variedade de resoluções, mas quando chegar em um limite muito grande, por exemplo, uma TV gigantesca, decide-se parar [...]. Como isso ocorre?\nImagine-se que o site responsivo, quando chegar na TV grande, deve ficar centralizado no meio de uma largura fixa. Coloca-se um limite no responsivo.
![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image22.jpg\")
Isso é possível, bastando trabalhar com max-width, que é onde se define o tamanho máximo que a página terá, [...] sem ultrapassá-lo. Ele será responsivo para valores abaixo do valor máximo fixado, do qual não passará.
![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image23.jpg\")
Coloca-se margens zero auto para o site ficar centralizado.
\n![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image24.jpg\")
Através do max-width, e também do min-width (que funciona ao contrário), limita-se as bordas até quanto se entender necessário para o objetivo que se deseja para o [design] responsivo funcionar.
Isso seria interessante também, porque em termos práticos é impossível atingir todos os dispositivos existentes, por isso a necessidade de limitar para os dispositivos mais comuns.
\nNesse caso, talvez 1200 ou 1400 pixels seja uma medida suficiente para 99.9% dos dispositivos que existem atualmente. É claro que, futuramente, tais números possam ser revistos, mediante o avanço tecnológico.
\nAgora, vejamos este caso.
\n![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image25.jpg\")
Como se implementa um design com duas colunas em CSS? Coloca-se uma [classe painel], um width de 50%, um float left, e os painéis ficarão flutuando lado a lado, formando duas colunas.
![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image26.jpg\")
A discussão gira em torno da seguinte questão: quando se diminui a resolução para um tamanho minúsculo, a width de 50% será respeitada, mas o tamanho talvez fique pequeno demais, muito apertado.
![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image27.jpg\")
O que se pode fazer para resolver o problema? De fato, o site deve continuar ocupando os 50%, isto é, que ele seja flexível de acordo com a resolução, mas, ao chegar em resoluções muito pequenas, queremos que o site fique com um tamanho mínimo, impedindo que fique muito pequeno.
\nGraficamente seria o seguinte: coloca-se duas colunas lado a lado e quando o site atingir o tamanho mínimo, uma coluna escorrega para baixo da outra sem ficar muito apertado.
\n![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image28.jpg\")
Essa solução pode ser implementada, em CSS da seguinte forma: utililza-se classe painel, width 50% e um min-width de 250 pixels. Isso significa que o site vai ficar com 50% em várias resoluções, porém nunca abaixo de 250 pixels, se ficar abaixo disso, uma das colunas escorrega para a linha de baixo.
![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image29.jpg\")
O comportamento de escorregar uma das colunas para a linha de baixo, pode ser feito de diferentes formas, como, por exemplo, um inline block, alinhado no topo.
![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image30.jpg\")
Aqui, a ideia é demonstrar que tanto o min-width, quanto o do max-width, como no exemplo anterior, podem ser boas ferramentas para ajudar a limitar a responsividade do site, nos extremos onde eles não fazem mais sentido.
IMAGENS FLUÍDAS
\nPor último, para continuarmos essa parte básica de layout fluído, vamos falar de imagens fluídas.
\nPode-se colocar imagens na página criada, mas estas costumam ser o grande inimigo do design responsivo, porque se pensarmos bem, considerando que todos os elementos possuem medidas flexíveis, a imagem é uma coisa que basicamente se constitui de pixels, mas como estamos tratando de design responsivo, não é possível usar pixels fixos, porém somente percentuais flexíveis. E as imagens não tem como: são transportadas do Photoshop, por exemplo, em pixels e como poderia ser transportada a imagem em pixels para o mundo das formas flexíveis do design responsivo?
\nMais adiante veremos detalhadamente como lidar com imagens, mas por agora vamos trabalhar com o cenário apresentado na Fig. 35:
\n![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image31.jpg\")
Temos uma imagem que ocupa determinado espaço, no texto de um elemento, a qual é pouco menor que o texto, isto é, digamos que a imagem tenha 400 pixels e o elemento laranja tenha 600 pixels. Em [...] ela ocupa o seu espaço sem qualquer problema. Tudo está definido como porcentagem, o tamanho, a largura do elemento, o que significa que se o elemento for diminuído, os seus componentes vão se ajustando.
\n![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image32.jpg\")
Porém, lembre-se de que a imagem é constituída de pixels fixos e se o elemento for reduzido um pouco mais, a imagem começará a vazar, estourando tamanho do elemento principal.
![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image33.jpg\")
Isso ocorre porque a imagem é fixa e o elemento ficou menor que aquilo. Contudo, é fácil corrigir o problema, ou seja, o que se quer é que a imagem fique grudada dentro do elemento.
\nUsa-se a classe da imagem, com width de 100% (lembre-se que a porcentagem é sempre relativa ao elemento-pai) ao que se tem no conteúdo laranja. Na prática significa que a imagem vai ficar contida ali dentro, como se vê na Fig. 38:
![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image34.jpg\")
Há um detalhe importante: resolvemos o caso da imagem estourar o layout, porém no momento em que aumentar novamente, a imagem aumenta proporcionalmente, afinal a largura foi definida como 100% e assim sempre será.
\n![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image35.jpg\")
Repare que a imagem vai ocupar 100%, não interessando se a tela aumentar até 1000 pixels, acompanhando sempre o tamanho total da tela. Porém, lembremos que a imagem inicial tinha 400 pixels de largura e se for colocada em uma tela de 1000 pixels, vai aumentar e esticar, se tornando pixelizada, aquele efeito de zoom em uma foto digital em que se enxerga todos os pixels. A qualidade não fica boa.
O que se pretende é que nesse layout maior a imagem fique do tamanho certo, não estoure o seu maior tamanho e, por outro lado, se ajuste a um layout pequeno, sem qualquer vazamento. Isto é obtido utilizando-se o max-width de 100%.
![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-2/image36.jpg\")
Assim a imagem não vai estourar o tamanho do contêiner, sem forçar a imagem a ficar sempre do tamanho do contêiner. Ela ficará em seu tamanho natural quando em situações grandes e do tamanho máximo para encaixar dentro do contêiner, quando precisar ser reduzida.
\nEssa regra da imagem com max-width 100% é clássica em sites responsivos, e na criação de sites deve ser um dos primeiros comandos a serem escritos, justamente para evitar o problema das imagens ficarem estourando.
Mais adiante veremos mais detalhes de imagens responsivas.
\nRESUMO
\n1) Sobre o layout fluído, trabalhamos com porcentagens e em, analisando o funcionamento de ambos os tipos de medida na prática e os cálculos, como o navegador chega naqueles valores;
2) Vimos também como faz diferença o uso de porcentagens e em nas fontes e nas medidas, como width, margem e tudo mais;
3) Foi mostrado como se trabalha com inline-block e também com max e min-width, para criar aquelas ideias de limitar o design responsivo, colocar uma coluna embaixo da outra, o que for necessário;
4) Por fim, demonstramos um pouco com a ideia de imagens fluídas trabalhando com max-width de 100%.
Agora vamos aplicar vários desses conceitos na prática em um exercício que temos no curso, continuando na próxima aula.
\n","videoUrl":"https://gnarus-video.4986a99d4a6ebf7ab87ee6461d95b58b.r2.cloudflarestorage.com/alura/105792076-sd.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20260421T032942Z&X-Amz-SignedHeaders=host&X-Amz-Credential=099e678757b68a07f650f27240529bce%2F20260421%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Expires=604800&X-Amz-Signature=ea37ccdeed9c18e1deebf67bc1311b938cbf14fdd96df5d5d155fa316063f2a2"},{"sectionName":"Media Queries","taskName":"Media Queries","transcription":"MEDIA QUERIES
\nJá foi discutido sobre a aplicação do design responsivo e como implementar um design fluído eficiente. Porém, o design fluído resolve somente metade do problema de um site responsivo.
\nDESIGN FLUÍDO RESOLVE SÓ METADE DO PROBLEMA
\nPorque quando se trabalha com medidas flexíveis, como as porcentagens, os em etc., teremos um site que se adapta muito bem para variadas resoluções, à medida que vai se redimensionando, mas como existem muitos tipos de resolução, por exemplo, desde um desktop até um celular pequeno, talvez as adaptações não fiquem tão boas nos extremos, com acontece no caso do exercício para criação de um site com três colunas.
As três colunas flexíveis vão se adaptando a várias resoluções, porém quando se chega em um layout menor pode acontecer o seguinte:
\n \n![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-3/image1.jpg\")
\nFig1\n\n\nVeja-se que o layout está colocado no tamanho de um smartphone. Repare que o limite responsivo é limitado, as medidas flexíveis, as porcentagens, fazendo as três colunas. Contudo, nesse caso as três colunas estão muito apertadas, pois a tela é pequena para os 33% que foram estabelecidos.
\nTalvez para telas pequenas o interessante fosse parar de trabalhar com três colunas e trabalhar, por exemplo, com uma coluna:
\n \n![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-3/image2.jpg\")
\nFig2\n\n\nSe fosse somente uma coluna, o texto teria espaço para fluir etc. Pode ser que se fizermos com uma coluna, o scroll da página vai aumentar, mas isso não é exatamente um problema, pois quando se trabalha com mobile é comum um scroll maior, o usuário já está acostumado com isso.
O importante aqui é que, ao mesmo tempo em que o design tem apenas uma coluna no mobile, ele deve ter três colunas na versão desktop, ou seja, queremos dois layouts diferentes dependendo do tipo de dispositivo que se vai trabalhar. Na prática, este é o chamado layout condicional.
\nLAYOUT CONDICIONAL
\nQueremos mudar o layout, a partir de alguma condição, que ficará assim quando dito em código: imagine-se uma classe chamada seção, que representa cada uma daquelas seções de notícias.
\nPor exemplo, na versão desktop ele deve ter width 100%, ou seja, somente uma coluna.
Em uma versão intermediária, um tablet, por exemplo, ele terá width 50%, o que resultará em duas colunas.
Já na versão mobile pequeno, o width será 33,33%, trabalhando com três colunas.
![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-3/image3.jpg\")
\nFig3\n\n\nImagine-se esses três códigos, todos corretos, porém cada um para um tipo de cenário específico: desktop, mobile e tablet.
\nA intenção é aplicar esse código diferente em cada uma das situações, o que pode ser feito por meio das media queries.
\n \n![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-3/image4.jpg\")
\nFig4\n\n\nPrimeiramente se envolve os blocos de código em blocos de min-width.
O que seria o @media (min-width: 768px)? Este bloco está indicando que aquele determinado pedaço de código se aplica somente em telas que tenham, no mínimo, uma largura de 768 pixels; e no código seguinte, @media (min-width: 1024px), uma largura de, no mínimo, 1024 pixels.
Percebam que se abrirmos o site em um celular pequeno, nem 768px, nem 1024px, valerá somente a primeira regra: width 100%.
Se o site for aberto em uma tela um pouco maior, que tenha por volta de 768 px ou 800px, uma média entre as duas media queries, valerá o código intermediário width 50%.
Ao se abrir o site em uma tela de desktop, valerá o terceiro código width 33,33%, ficando com três colunas.
Esse procedimento é chamado de CSS3 Media Queries.
CSS3 MEDIA QUERIES
\nTrata-se de um recurso do CSS que permite implementar a ideia de layout condicional. Um grande pilar do design responsivo. Pois não é possível, na grande maioria dos casos, fazer um design responsivo somente com o design fluído, é preciso também das media queries.
SINTAXE
\nQuanto à sintaxe das media queries, vejamos que primeiramente deve ser colocado um bloco @media, o qual recebe como parâmetro a condição que será testada. Na Fig.5 temos um min-width: 400px:
![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-3/image5.jpg\")
\nFig5\n\n\nSomente para entender o histórico dessa sintaxe, lembremos que isto foi inspirado no procedimento das media types do CSS2, já existindo há um bom tempo.
![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-3/image6.jpg\")
\nFig6\n\n\nA diferença é que naquele sistema não se podia fazer, por exemplo, uma busca por width. Deveria ser feito como na Fig. 6, onde somente era possível definir qual o tipo de mídia que está se acessando, como, por exemplo, um media screen, uma tela. Então quando for acessado em uma tela, os anúncios são exibidos. Já o media print, a mídia de impressão, quando o usuário quer imprimir, os anúncios ficam escondidos, afinal um anúncio em uma impressão talvez não faça muito sentido.
O @media print é bastante comum na construção de sites há muito tempo, tendo sua origem nos media types. Mais recentemente ocorreu a extensão do @media screen, como se vê na Fig. 7, um exemplo em que não as duas coisas não estão misturadas:
![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-3/image7.jpg\")
\nFig7\n\n\n\nDe onde se retira, que a media querie vai avaliar verdadeira se estiver em uma tela, digamos que a impressão não valeria, cujo tamanho seja, no mínimo, 400px e qualquer outro valor acima de 400.
Funciona bem a mistura de media types com media queries, devendo-se lembrar do cuidado com browsers muito antigos, como, por exemplo, um IE6, que ainda não suporta as novidades das media queries, mas já suportava as media types. Devido a essa posição intermediária, um código como aquele apresentado na Fig. 7, pode ser interpretado como somente @media screen, ignorando o restante porque não entende e avaliando como verdadeiro [...].
Nas media queries novas essa sintaxe foi modificada para alocar a palavra-chave only. Na prática nada muda, fazendo apenas a filtragem dos navegadores antigos, ou seja, eles não vão entender o only, passando a ignorar o media query inteiro, o que estaria mais correto.
Quanto à Fig. 7, lembre-se que ela foi apresentada somente porque é muito comum em vários tutoriais, na internet, encontrarmos essa sintaxe, only screen and (min-width...), embora, durante a construção de um site, não a usemos muito.
Voltando à media query inicial (Fig. 5), que tem simplesmente um min-width, a indicar somente o tamanho da tela, é suficiente para 99% dos casos. Lembrando que esta media query será usada nos códigos e exercícios que faremos.
Temos falado sempre em min-width, mas existem várias media queries possíveis, como, por exemplo o max-width, que é o inverso.
![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-3/image8.jpg\")
\nFig8\n\n\n\nQuando se fala em min-width: 400px, significa que queremos um tamanho de 400px para mais, ou seja, no mínimo 400px. Por outro lado, quando se coloca max-width 400px, indica-se um tamanho máximo de 400px, isto é, de 400px para baixo. Ambas são válidas, dependendo do cenário como veremos mais adiante.
Além do min e do max, há também o width exato, por exemplo, width 400px, vai pegar a tela exatamente de 400px.
Existem ainda variações para altura, height, e mais duas: device-width e device-height.
![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-3/image9.jpg\")
\nFig9\n\n\n\nA diferença do device-width para o width é que o primeiro pega a resolução nativa da tela inteira, a tela física que o usuário está trabalhando. Já o width pega o tamanho da janela do navegador.
No mobile, geralmente, esses dois valores são os mesmos, mas nem sempre alguns navegadores podem ser redimensionados, notando-se melhor a diferença nas telas de um desktop, por exemplo, em que o width ou height serão diferentes de seus device.
Existem mais algumas media queries que podemos usar, como a orientação retrato ou paisagem.
\n \n![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-3/image10.jpg\")
\nFig10\n\n\nPodemos pegar um dispositivo que possa ser girado, colocando-o na posição vertical (retrato) ou horizontal (paisagem), utilizando algum recurso a mais no código que está sendo inserido, em um design específico para esses cenários.
\nA quantidade de media queries existentes é muito grande, mas, na prática, algumas são mais utilizadas.
\nComo, por exemplo, a width. Se tivermos uma width 400px, que significa exatamente a largura da tela, exatamente 400px, um pixel a mais ou um a menos, já não funciona. Não parece tão útil, melhor seria retirar a width fixa da lista de media queries mais utilizadas. Pois, nesse caso, deseja-se quo CSS se aplique especificamente para uma largura de tela, o que não interessaria no momento em que se estiver trabalhando com uma grande variedade de dispositivos, pois o interessante é ter códigos o mais flexíveis possível. Então retira-se a width fixa da lista.
Outra media query que pode ser cortada na maioria dos casos é a height. Em geral, na web fazemos conteúdos que a altura é orientada em scroll, em que a limitação das páginas se dá pela largura. Não é muito comum uma página com scroll horizontal. De uma forma geral, faz-se o scroll vertical e a limitação da página é a largura.
As media queries tipo device também podem ser colocadas de lado, pois dificilmente haverá interesse pelo usuário do tamanho real da tela do dispositivo utilizado, interessando bem mais o tamanho da tela do navegador, e se este estiver em tela cheia não haverá problemas, os números serão os mesmos. Porém, se o navegador estiver redimensionado, o que interessa no momento de construção da página é saber o tamanho do navegador dos usuário. O tamanho real da tela não seria tão útil, nesses casos.
Já as media queries de orientação são sempre interessantes, devendo ser mantidas.
\n \n![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-3/image11.jpg\")
\nFig11\n\n\n\nPortanto, apesar de existirem várias media queries, nem todas são úteis para nosso propósito.
\nEspecificamente, o min-width ainda é mais útil, na prática, que o max-width. Embora a utilização de ambos possa ser implementada sem problemas. Voltaremos a esse tópico mais adiante.
Retornando ao min-width 400px, como esse valor foi obtido? Qual a origem desses 400px? Ou, ainda, 768px e 1024px (Fig. 4)?
Esses números são denominados breakpoints, ou seja, os pontos de quebra do design, indicando o momento em que este será alterado pela media query.
Como exemplo, temos alguns frameworks famosos, que foram inspiração para demonstrar esses valores.
![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-3/image12.jpg\")
\nFig12\n\n\n\nNa Fig. 12 temos o twitter bootstrap, em que existe uma tabela de media queries mais comuns (1200px, 980px, 768px, 480px...).
Mas como se chega nesses valores? Por exemplo, o valor 768px é a largura de um iPad, 480px é a largura de um iPhone clássico, não o mais novo. Já 1200px costuma ser o tamanho de um notebook atual ou de uma tela desktop padrão que possui 1280px, menos as barras de rolagem, resultando em 1200px.
\nAssim, se atentarmos bem, tais valores são inspirados em dispositivos comuns existentes no mercado.
\nA seguir, temos o exemplo de outro framework:
![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-3/image13.jpg\")
\nFig13\n\n\n\nOnde se vê um valor de 320px and up e mais algumas media queries, inclusive algumas parecidas com a Fig. 12 (320px, 480px, 600px, 768px, 992px e 1382px).
Observe-se que, novamente, temos valores inspirados em dispositivos comuns. Por exemplo, 320px é o tamanho de um iPhone, 480px um IPhone em modo paisagem, 600px é um tamanho comum a Tablets de 7 polegadas, 768px é o tamanho de um iPad, 992px costuma ser os 1024px sem as barras de rolagem e 1382px é do desktop maior. Assim, percebe-se que são utilizados valores de dispositivos comuns.
\nNa prática, por exemplo, temos que enquanto um iPhone tem 320px, os Androids costumam ter 360px, e não temos uma media query que fique entre esses valores. Aliás, pergunta-se, precisaria de um valor que fosse exatamente a média desses dois valores citados? Ou ainda, quais os recursos que podemos utilizar para gerar os breakpoints?
Aqui devemos lembrar que as tabelas de dispositivos-padrão não são o ideal para a criação de breakpoints, mas sim os chamados breakpoints de conteúdo.
BREAKPOINTS DE CONTEÚDO
\nIsso significa dizer que, a página criada deve ser aberta em diferentes dispositivos e verificar em quais deles o tamanho não está ideal para aquela resolução, anotando-se o tamanho e criando uma media query para o dispositivo com uma resolução específica.
\nDesta forma, verifique como o design se comporta em variadas resoluções, e crie breakpoints que ajustarão o design pretendido àquelas resoluções diferentes.
Por isso, não é interessante pegar dispositivos "famosos" ou padrão, pois, na verdade, não existem dispositivos-padrão. Os usuários se utilizam de milhares de dispositivos diferentes e isso muda o tempo todo. Assim, a única maneira de se garantir o bom funcionamento do site em todas as resoluções é testando em todas elas e ajustar quando for necessário.
\nA seguir, temos um exemplo de uma página em tamanho pequeno, que será redimensionada para vários tamanhos possíveis.
\n \n![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-3/image14.jpg\")
\nFig14\n\n\n\nNo alto pode-se ver qual o tamanho possível da janela e a adaptação do design.
\n \n![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-3/image15.jpg\")
\nFig15\n\n\n\nComeçando com trezentos e poucos pixels percebe-se o design se adaptando.
\n \n![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-3/image16.jpg\")
\nFig16\n\n\n\nO menu, por exemplo, que está embaixo do logo, quando se chega em, mais ou menos 460px, sobe, se posicionando ao lado do logo.
\n \n![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-3/image17.jpg\")
\nFig17\n\n\n\nMas 460px não é um número de dispositivos-padrão, sendo utilizado porque o layout fica interessante.
\nNa Fig.18 pode-se ver como o layout se comporta com 580px.
\n \n![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-3/image18.jpg\")
\nFig18\n\n\n\nE ao aumentar para algo mais que 600px, o design adquire outra configuração, deixando o conteúdo maior.
\n \n![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-3/image19.jpg\")
\nFig19\n\n\n\nAos 670px, já se ajusta o tamanho de texto e assim por diante.
\n \n![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-3/image20.jpg\")
\nFig20\n\n\n\nPortanto, a ideia é aumentar o tamanho da página e percebendo as suas necessidades, de modo que encontro o breakpoint ideal para cada resolução.
Esse é o procedimento da criação de media queries para breakpoints de conteúdo. E para realizar esses testes alguns navegadores já possuem a possibilidade de simular os dispositivos móveis colocando qualquer resolução desejada como no chrome e no firefox
Como último detalhe para fechar esse assunto de media queries, trataremos daquela diferença entre o max-width e o mini-width, que é fazer media queries no estilo mobile first.
MEDIA QUERIES MOBILE FIRST
\nUtilizando a media query para criar um determinado breakpoint em uma certa categoria de dispositivos. É possível escolher se dentro da media query vai um mobile ou um desktop, ou seja, a versão padrão do CSS será mobile ou desktop?
Agora veremos como funciona o estilo mobile first. Observemos a próxima figura:
![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-3/image21.jpg\")
\nFig21\n\n\n\nFoi criado um media query chamado desktop first, em que existem dois títulos, h1 e h2, ambos devem ficar lado a lado na tela do desktop, flutuando, e no mobile um deve escorregar para baixo do outro, sem flutuar. Ou seja, queremos float left em um cenário e float none em outro.
No formato media query desktop first, o código fora do media query, com float left, representa o que se quer para o desktop: os dois elementos flutuando.
Em seguida, criaremos uma media query de max-width para representar o que se quer na versão mobile, isto é, para dispositivos de até 400px que terão o float none. Esta é a versão desktop first.
Se invertermos a ordem das media queries, ou seja, se o código padrão passa a ser o mobile e o código interno da media query passa a ser o desktop, será necessária a inversão da media query de max para min-width.
Porém, há um detalhe interessante:
\n \n![](\"https://cdn3.gnarususercontent.com.br/responsivo/aula-3/image22.jpg\")
\nFig22\n\n\n\nRepare que, como o padrão do float já é trabalhar com float none, não é necessário escrever float none na versão mobile. Portanto, escreveremos somente float left na versão desktop, ou seja, de 400px para cima.
Assim, ao usarmos o mini-width é muito comum a aplicação em cenários como esse, em que o padrão já vale para o mobile, enquanto são criadas para o desktop customizações a mais, afinal é mais comum que o layout do desktop seja mais complicado que o do mobile, em decorrência de mais espaço, de uma largura maior.
Na prática, a media query de min-width é muito mais utilizada que um max-width, pois o min-width representa a estratégia da media queries mobile first.
RESUMO
\n1) Foi visto que as media queries são uma forma de lidar com layout condicional, ou seja, layouts diferentes, ajustes diferentes, dependendo de alguma condição, em especial tamanho de tela;
\n2) Também foi visto como eram as media types, no CCS2, e como é a sintaxe atual das media queries no CCS3;
3) Além disso, foram discutidas as boas práticas, como trabalhar com breakpoints, a partir do conteúdo da página que se deseja criar, do layout desta página, do seu design, o que é melhor do que recorrer a tabelas de dispositivos considerados "padrão";
4) Por fim discorremos sobre a media query mobile first, em que é utilizado mais o min-width, é mais interessante na prática.