0

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

2
  • @Anderson Carlos Woss meu problema é outro, minhas queries estão totalmente diferente da pergunta duplicada eu so especifico max-width nao min-width
    – goio
    Commented 4/07/2018 às 20:29
  • Bruno edite sua pergunta e coloca seu CSS completo, ai que fica mais para te dar uma resposta mais precisa.
    – hugocsl
    Commented 4/07/2018 às 21:23

1 Resposta 1

2

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)">
2
  • tem alguma diferença entre @media (max-width:), @media screen and (max-width:), @media screen only (max-width:) ?
    – goio
    Commented 4/07/2018 às 20:47
  • 1
    O 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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .