@Media min-width e max-width

225

Eu tenho esta @mediaconfiguração:

HTML :

<head>
  <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>

CSS :

@media screen and (min-width: 769px) {
    /* STYLES HERE */
}

@media screen and (min-device-width: 481px) and (max-device-width: 768px) { 
    /* STYLES HERE */
}

@media only screen and (max-device-width: 480px) {
    /* STYLES HERE */
}

Com essa configuração, ele funciona no iPhone, mas não no navegador.

É porque eu já tenho deviceno meta, e talvez o tenha max-width:480px?

css mobile media-queries

— rallybilen
fonte

1

Qual é o problema - Os estilos padrão serão aplicáveis a telas maiores que 769 px.

— Gurpreet Singh

basta remover o @media screen and (min-width:769px){em torno de seus estilos normais do navegador

— Zoltan Toth

O que você quer dizer com Zoltan? E acho que posso resolver isso. Primeiro, o problema foi quando redimensionei meu navegador com o max-device - com ele funcionava no telefone, mas não na broswer, sem o "dispositivo" ele funciona nos dois.

— Rallybilen

Então basiclly com o "dispositivo" ele funciona em ambos móvel / navegador, mas quando eu adiciono dispositivo não pode vê-lo no navegador \

— rallybilen

1

Deve ser 980pxnão 960porque extremidades tamanho do navegador no 980px.

339

Eu descobri que o melhor método é escrever o CSS padrão para os navegadores mais antigos, como navegadores mais antigos, incluindo 5.5, 6, 7 e 8. Não é possível ler @media. Quando uso o @media, uso-o assim:

<style type="text/css">
    /* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
    @media only screen and (min-width: 960px) {
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width: 1440px) {
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width: 2000px) {
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width: 480px) {
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (device-width: 768px) {
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }
</style>

Mas você pode fazer o que quiser com o seu @media. Este é apenas um exemplo do que achei melhor para mim ao criar estilos para todos os navegadores.

especificações CSS do iPad.

Além disso! Se você procura impressão, pode usar@media print{}

— bashleigh
fonte

16

Por que você colocou telas 'mac'? Não são apenas os Macs "incríveis" que podem ter telas grandes de alta resolução!

— Lucas

38

O problema subjacente está usando max-device-widthvs planície antiga max-width.

O uso da palavra-chave "device" visa a dimensão física da tela, não a largura da janela do navegador.

Por exemplo:

@media only screen and (max-device-width: 480px) {
    /* STYLES HERE for DEVICES with physical max-screen width of 480px */
}

Versus

@media only screen and (max-width: 480px) {
    /* STYLES HERE for BROWSER WINDOWS with a max-width of 480px. 
       This will work on desktops when the window is narrowed.  */
}

— jpostdesign
fonte

11

Se o site em dispositivos pequenos se comportar como a tela da área de trabalho, será necessário colocar essa metatag no cabeçalho antes

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

Para consultas de mídia, você pode definir isso como

isso cobrirá todas as larguras de seu celular / telefone celular

    @media only screen and (min-width: 200px) and (max-width: 767px)  {
    //Put your CSS here for 200px to 767px width devices (cover all mobile portrait width //

    }

Para iPad e iPad pro, você precisa usar

    @media only screen and (min-width: 768px) and (max-width: 1024px)  {
    //Put your CSS here for 768px to 1024px width devices(covers all iPad portrait width //

    }

Se você deseja adicionar css para o modo Paisagem, pode adicionar este

e (orientação: paisagem)

  @media only screen and (min-width: 200px) and (max-width: 767px) and (orientation : landscape) {
        //Put your CSS here for 200px to 767px width devices (cover all mobile landscape width //

        }

— Rohit Kaushik
fonte

8

O valor correto para o contentatributo deve incluir initial-scale:

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

Expandir snippet

— Ksenia Titova
fonte

2

Se você pudesse explicar o porquê e adicionar referências, isso tornaria essa resposta mais útil.

— Michael Benjamin

2

@ Michael_B A inicial era 'user-scalable = no'. Isso diz tudo o que penso.

— Apolo Radomer

0

para algum iPhone, você deve colocar sua janela de visualização como esta

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=0" />

— NuggaN85
fonte