Por que minhas consultas de mídia CSS3 não estão funcionando?

No styles.css, estou usando consultas de mídia, as quais usam uma variação de:

/*--[ Normal CSS styles ]----------------------------------*/

@media only screen and (max-width: 767px) {

    /*--[ Mobile styles go here]---------------------------*/
}

Os sites são redimensionados para o layout que desejo em um navegador comum (Safari, Firefox) quando reduzo a janela; no entanto, o layout para celular não é exibido em nenhum telefone. Em vez disso, apenas vejo o CSS padrão.

Alguém pode me apontar na direção certa?

Todas as três foram dicas úteis, mas parece que eu precisava adicionar uma metatag:

<meta content="width=device-width, initial-scale=1" name="viewport" />

Agora parece funcionar tanto no Android (2.2) quanto no iPhone ...

Não se esqueça de ter as declarações CSS padrão acima da consulta de mídia ou a consulta também não funcionará.

.edcar_letter{
    font-size:180px;
}

@media screen and (max-width: 350px) {
    .edcar_letter{
        font-size:120px;
    }
}

Suspeito que a palavra-chave onlypossa ser o problema aqui. Não tenho problemas ao usar consultas de mídia como esta:

@media screen and (max-width: 480px) { }

Eu usei o bootstrap em um site de imprensa, mas ele não funcionou no IE8, usei o javascript css3-mediaqueries.js, mas ainda não está funcionando. se você deseja que sua consulta de mídia funcione com esse arquivo javascript, adicione tela à sua linha de consulta de mídia em css

aqui está um exemplo :

<meta name="viewport" content="width=device-width" />


<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>

css Linha de link tão simples quanto a linha acima.

Hoje eu tive situação semelhante. A consulta de mídia não funcionou. Depois de um tempo, achei que o espaço depois de 'e' estava faltando. A consulta de mídia adequada deve ficar assim:

@media screen and (max-width: 1024px) {}

A ordem sequencial do código css também é importante, por exemplo:

@media(max-width:600px){
  .example-text{
     color:red;
   }
}
.example-text{
   color:blue;
}

o código acima não funcionará porque a ordem executada. Precisa escrever da seguinte forma:

.example-text{
   color:blue;
}
@media(max-width:600px){
  .example-text{
     color:red;
   }
}

Sempre mencione a largura máxima e a largura mínima em algumas unidades, como px ou rem. Isso descobriu para mim. Se eu escrever sem a unidade e apenas o valor numérico, o navegador não poderá ler as consultas da mídia. exemplo: esta tela está incorreta somente na mídia e (largura máxima: 950) e está correta na tela somente na mídia e (largura máxima: 950px)

Jogando outra resposta no ringue. Se você estiver tentando usar variáveis ​​CSS, ele falhará silenciosamente.

@media screen and (max-device-width: var(--breakpoint-small)) {}

Variáveis ​​CSS não funcionam em consultas de mídia (por design).

Razão estranha que nunca vi antes: se você estiver usando um seletor "pai> filho" fora da consulta de mídia (no Firefox 69), isso poderá interromper a consulta de mídia. Não sei por que isso acontece, mas para o meu cenário isso não funcionou ...

@media whatever {
    #child { display: none; }
}

Mas adicionar o pai para corresponder a algum outro CSS mais adiante na página, isso funciona ...

#parent > #child { display: none; }

Parece que especificar o pai não deve importar, pois um ID é muito específico e não deve haver ambiguidade. Talvez seja um bug no Firefox?

O trecho de código do OP claramente usa a marcação de comentários correta, mas o CSS pode ser interrompido de maneira progressiva - portanto, se houver um erro de sintaxe, tudo o que ocorrerá depois disso provavelmente falhará. Algumas vezes, confiei em fontes confiáveis ​​que forneciam marcação incorreta de comentários que quebraram minha folha de estilos. Como o OP forneceu apenas uma pequena seção do código, sugiro o seguinte:

Verifique se todos os seus comentários CSS usam essa marcação /*... */- que é a marcação de comentário correta para css de acordo com o MDN

Valide seu css com um linter ou um validador online seguro. Aqui está um por W3

Mais informações: fui verificar os últimos pontos de interrupção recomendados para consulta de mídia no bootstrap 4 e acabei copiando a placa da caldeira diretamente de seus documentos. Quase todos os blocos de código foram rotulados com comentários no estilo javascript //, que quebraram meu código - e me deram apenas erros de compilação enigmáticos com os quais solucionar problemas, o que passou pela minha cabeça na época e me causou tristeza.

O editor de texto IntelliJ me permitiu comentar linhas específicas de css em um arquivo MENOS usando a tecla ctrl + / hotkey, que foi ótima, exceto ela é inserida //por padrão em tipos de arquivos não reconhecidos . Não é freeware e menos é bastante popular, então eu confiei nele e fui com ele. Isso quebrou meu código. Há um menu de preferências para ensinar a marcação de comentários correta para cada tipo de arquivo.

A inclusão de uma metatag como a abaixo pode fazer com que o navegador lide com o zoom da viewport de maneira diferente.

<meta content="width=device-width, initial-scale=1" name="viewport" />

Também encontrei esse problema recentemente, e depois descobri que era porque não coloquei um espaço entre ande (. Este foi o erro

@media screen and(max-width:768px){
}

Então eu mudei para isso para corrigi-lo

@media screen and (max-width:768px){
}

Eu uso alguns métodos, dependendo. Na mesma folha de estilo, uso: @media (largura máxima: 450px) ou, separadamente, verifique se o link está no cabeçalho corretamente. Eu dei uma olhada no seu fixmeup e você tem uma variedade confusa de links para o css. Ele age como você diz também no HTC desejo S.

@media all and (max-width:320px)and(min-width:0px) {
  #container {
    width: 100%;
  }
  sty {
    height: 50%;
    width: 100%;
    text-align: center;
    margin: 0;
  }
}

.username {
  margin-bottom: 20px;
  margin-top: 10px;
}

Para mim, eu havia indicado em max-heightvez de max-width.

Se é você, mude!

    @media screen and (max-width: 350px) {    // Not max-height
        .letter{
            font-size:20px;
        }
    }

Isso também pode acontecer se o nível de zoom do navegador não estiver correto. O zoom da janela do navegador deve ser 100%. No Chrome, use Ctrl + 0para redefinir o nível de zoom.