queria saber se as media queries
tem ordem de maior para menos ou vise versa, porque eu formato em um tamanho especifico funciona certinho, ai vou formata para outra tela a anterior deixa de funciona vise e versa, queria saber se tem uma ordem
1 Resposta
As medias querys funcionam em ordem de processamento igual os códigos css normais.
Imagine que você tem um b{ text-align:center }
na linha 1 e outro b{text-align:left}
na linha 20. O que ira valer é o da linha 20 pois em ordem de processamento ela vem depois e sobrescreve a anterior. Tenha isto em mente.
Eu geralmente começo o responsivo com a maior tela e vou colocando as regras das telas menores depois para sobrescrever as maiores.
entendendo isto, tem também o recurso de você deixar as regras visíveis ou não para determinado tamanho, como:
@media screen and (min-width: 768px) { a {color: yellow;} }
esta regra só deixara visível para resolução menores que 768px. Assim como você pode utilizar max-width
ou ambas juntas.
Tendo essas regras em vista é possível você criar as suas midias querys de varias formas possíveis.
você também pode utilizar essa media query na chamada do doc
<link rel="stylesheet" href="estilo.css" media="screen and (max-width: 480px)">
-
tem alguma diferença entre
@media (max-width:)
,@media screen and (max-width:)
,@media screen only (max-width:)
?– goioCommented 4/07/2018 às 20:47 -
1O
media (max-width)
é geral , O screen é utilizado para monitores ou dispositivos com telas coloridas em geral, uma outra possibilidade é o Print que é apenas para impressão. E não são renderizados na tela. O only nunca utilizei pra ser sincero. Achei este link que vai ser perfeito para você: devmedia.com.br/utilizando-css-media-queries/27085 Commented 4/07/2018 às 21:00
duplicada
eu so especificomax-width
naomin-width