Consultas de mídia: como segmentar computadores, tablets e dispositivos móveis?

471

Venho pesquisando pesquisas sobre mídia e ainda não entendo como segmentar dispositivos de determinados tamanhos.

Quero poder segmentar computadores, tablets e dispositivos móveis. Eu sei que haverá algumas discrepâncias, mas seria bom ter um sistema genérico que possa ser usado para direcionar esses dispositivos.

Alguns exemplos que encontrei:

# Mobile
only screen and (min-width: 480px)

# Tablet
only screen and (min-width: 768px) 

# Desktop
only screen and (min-width: 992px)

# Huge
only screen and (min-width: 1280px) 

Ou:

# Phone
only screen and (max-width:320px)

# Tablet
only screen and (min-width:321px) and (max-width:768px)

# Desktop
only screen and (min-width:769px)

Quais devem ser os pontos de interrupção para cada dispositivo?

betamax
fonte

Respostas:

643

Na IMO, estes são os melhores pontos de interrupção:

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Edit : Refinado para funcionar melhor com 960 grades:

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Na prática, muitos projetistas convertem pixels em ems, em grande parte b / c ems oferece melhor zoom. No zoom padrão 1em === 16px. Multiplique pixels por 1em/16pxpara obter ems. Por exemplo 320px === 20em,.

Em resposta ao comentário, min-widthé padrão no design "móvel primeiro", no qual você começa projetando para as telas menores e depois adiciona consultas de mídia cada vez maiores, trabalhando em telas cada vez maiores. Independentemente de você preferir min-, max-ou combinações delas, conhecer a ordem de suas regras, lembre-se de que, se várias regras corresponderem ao mesmo elemento, as regras posteriores substituirão as regras anteriores.

ryanve
fonte
1
Eu estive pensando sobre como aumentar o limite inferior de consultas de mídia. Parece lógico, mas não o vi mencionado com muita frequência. Eu daria um passo adiante e converteria em ems. Veja as capturas de tela @jonikorpi do comportamento do site de Ethan Marcotte com consultas de zoom e px. github.com/scottjehl/Respond/issues/18
Larry
21
Por que você usaria largura mínima em vez de largura máxima? Como você impediria que o min-width: 320pxcss substituísse o min-width: 801px?
precisa saber é o seguinte
2
Este código não funciona nos meus dispositivos móveis! Alguém pode dar um exemplo de trabalho!
Jacob
3
Alguém tem o equivalente "max-width" disso?
Pylinux 28/01
6
2018 - 2k e 4k estão a aumentar #
Alexander
160

Não segmente dispositivos ou tamanhos específicos!

A sabedoria geral não é direcionar dispositivos ou tamanhos específicos , mas reformular o termo 'ponto de interrupção':

  • desenvolva o site para celular primeiro usando porcentagens ou ems, não pixels,
  • tente em uma viewport maior e observe onde começa a falhar,
  • redesenhar o layout e adicionar uma consulta de mídia CSS apenas para lidar com as partes quebradas,
  • repita o processo até chegar ao próximo ponto de interrupção.

Você pode usar o responsivepx.com para encontrar os pontos de interrupção 'naturais', como em 'pontos de interrupção estão mortos' por Marc Drummond .

Use pontos de interrupção naturais

Os 'pontos de interrupção' tornam-se o ponto real no qual o design do seu celular começa a 'quebrar', ou seja, deixa de ser utilizável ou visualmente agradável. Depois de ter um bom site móvel funcionando, sem consultas de mídia, você pode deixar de se preocupar com tamanhos específicos e simplesmente adicionar consultas de mídia que lidam com viewports sucessivamente maiores.

Se você não está tentando fixar um design em um tamanho exato de tela, essa abordagem funciona removendo a necessidade de segmentar dispositivos específicos . A integridade do próprio design em cada ponto de interrupção garante que ele se mantenha em qualquer tamanho. Em outras palavras, se um menu / seção de conteúdo / o que quer que pare de ser usado em um determinado tamanho, crie um ponto de interrupção para esse tamanho , não para um tamanho de dispositivo específico.

Veja o post de Lyza Gardner sobre pontos de interrupção comportamentais , e também o post de Zeldman sobre Ethan Marcotte e como o design responsivo da web evoluiu a partir da ideia inicial.

Usar marcação semântica

Além disso, o mais simples e mais semântica da estrutura DOM com nav, header, main, section, footeretc. (evitando abominações como div class="header"com internos aninhados divmarcas) o mais fácil será a resposta engenheiro, especialmente evitando carros alegóricos usando CSS disposição da grade (de Sarah Drasner gerador grade é um ótima ferramenta para isso) e flexbox para organizar e reordenar de acordo com o seu plano de projeto de RWD.

Dave Everitt
fonte
10
O cliente deseja que o site pareça com isso no iPad. Meu melhor ponto de interrupção faria o site mudar para o layout móvel no iPad. O cliente não aceitaria isso, eles querem que a versão sofisticada apareça no iPad e em outros tablets. A sabedoria geral não está pagando meu salário :) Eu precisava fazer truques com a metatag da viewport. Foi muito doloroso, mas consegui com uma pequena ajuda do JavaScript (como sempre). PS: usei unidades de cm, não pixels.
Rolf
Com os pontos de interrupção naturais, você pode ter um ponto de interrupção de tamanho médio que inclua o iPad (e outros tablets) no modo paisagem ou adicionar outro ponto de interrupção no modo retrato. Às vezes, usei quatro pontos de interrupção, sempre iniciando o CSS e toda a marcação com o mobile-first (é mais difícil reduzir o foco e focar no mobile significa que seu design e conteúdo são reduzidos ao essencial, que você pode expandir à medida que o tamanho aumenta) , um pouco acima da largura de 400 px (ou "acima do tamanho do celular") e dois tamanhos de desktop, um extra largo. Você pode estilizar o ponto de interrupção 'acima do celular' para funcionar bem no iPad.
Dave Everitt
2
Isso não é suficiente para todos os casos. Tomemos, por exemplo, caixas de seleção. Eles podem ser adequados para todos os navegadores da Web em um PC, mas em um tablet são pequenos demais para o usuário tocá-lo. Às vezes, você precisa segmentar dispositivos, seja isso de conhecimento geral ou não. Este é um bom artigo: html5rocks.com/en/mobile/cross-device
monalisa717
2
Estou com Dave neste - existem tantos dispositivos que você não pode projetar para todos eles. O uso de pontos de interrupção naturais garante que o site funcione independentemente do tamanho da tela disponível. Em relação ao cliente que deseja que seu site tenha uma certa aparência - você precisa educá-lo. Quanto às caixas de seleção serem muito pequenas - onde estão seus rótulos?
diggersworld
@ user1411056 - bom artigo. Acho que depende do objetivo e do funcionamento do site / webapp. Eu diria que o design responsivo básico deve sustentar tudo antes que refinamentos sejam implementados. diggersworld Sou a favor da educação de clientes - por que mais eles estão pagando? E sim, as caixas de seleção podem ser responsivas; tocar em uma etiqueta é equivalente e as etiquetas podem ser estilizadas. Depois, há a inutilidade de pairar nos dispositivos de toque; que pode ter telas grandes e o atraso de toque de 300 ms . Uma base básica de RD, aprimorada pelo JS.
Dave Everitt
154

Se você deseja segmentar um dispositivo, basta escrever min-device-width. Por exemplo:

Para o iPhone

@media only screen and (min-device-width: 480px){}

Para comprimidos

@media only screen and (min-device-width: 768px){}

Aqui estão alguns bons artigos:

sandeep
fonte
32
Meu tablet tem uma largura de 2560x1600
LeeGee
36
Pode ser assim, mas os navegadores em dispositivos móveis têm uma "proporção de pixels do dispositivo". É aqui que trata cada "pixel" lógico como 2, 3 ou até mais pixels reais no seu dispositivo. Caso contrário, uma alta de 20 px seria muito pequena e impossível de pressionar - especialmente na tela!
greg84
6
@media only screen e (min-device-width: 480px) {} tentei - corresponde também a desktops. Mas e se quisermos apenas dispositivos móveis?
Darius.V
@ Darius.V, segue a mentalidade "Mobile First", ou seja, você inicia o mobile e faz alterações à medida que a tela fica maior, então você precisa incluir também: @media only screen and (min-device-width: 1024){}ou algo assim para substituir essas alterações. Alternativamente, você poderia fazer @media only screen and (MAX-device-width: 1024){}se você começou com um design de mesa e deseja fazer alterações somente para coisas menores que 1024.
Steely
Isso significa que a área de trabalho não funcionará com o RWD devido à largura mínima do dispositivo. Recomende fazer min-width e nada baseado em dispositivo. O verdadeiro responsivo não deve exigir atualização ou dispositivo limitado
TheBlackBenzKid
50
  1. Eu usei este site para encontrar a resolução e desenvolvi CSS por números reais. Meus números variam bastante das respostas acima, exceto que o meu CSS realmente atinge os dispositivos desejados.

  2. Além disso, tenha esse código de depuração logo após a consulta de mídia, por exemplo:

    @media only screen and (min-width: 769px) and (max-width: 1281px) { 
      /* for 10 inches tablet screens */
      body::before {
        content: "tablet to some desktop media query (769 > 1281) fired";
        font-weight: bold;
        display: block;
        text-align: center;
        background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99;
      }
    } 

    Adicione esse item de depuração em todas as consultas de mídia e você verá qual consulta está sendo aplicada.

user2060451
fonte
27

Os melhores pontos de interrupção recomendados pelo Twitter Bootstrap

/* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }
Santosh Khalse
fonte
25

Consultas de mídia para pontos de interrupção comuns do dispositivo

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
Purvik Dhorajiya
fonte
19
  1. Dispositivos pequenos demais (telefones, até 480px)
  2. Pequenos dispositivos (tablets, 768px e superior)
  3. Dispositivos médios (tablets, laptops e desktops grandes, 992px e superior)
  4. Dispositivos grandes (desktops grandes, 1200px e acima)
  5. e-readers retrato (Nook / Kindle), tablets menores - largura mínima: 481px
  6. tablets retrato, iPad retrato, e-readers paisagem - largura mínima: 641px
  7. tablet, iPad paisagem, laptops de baixa resolução - largura mínima: 961px
  8. HTC One largura do dispositivo: 360px altura do dispositivo: 640px -webkit-device-pixel-ratio: 3
  9. Largura do dispositivo Samsung Galaxy S2: 320px de altura do dispositivo: 534px -webkit-device-pixel-ratio: 1.5 (min - moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (proporção de pixel de dispositivo mínimo: 1,5
  10. Largura do dispositivo Samsung Galaxy S3: 320px altura do dispositivo: 640px -webkit-device-pixel-ratio: 2 (min - moz-device-pixel-ratio: 2), - navegadores Firefox mais antigos (anteriores ao Firefox 16) -
  11. Largura do dispositivo Samsung Galaxy S4: 320px de altura do dispositivo: 640px -webkit-device-pixel-ratio: 3
  12. Largura do dispositivo LG Nexus 4: 384px de altura do dispositivo: 592px -webkit-device-pixel-ratio: 2
  13. Largura do dispositivo Asus Nexus 7: 601px altura do dispositivo: 906px -webkit-min-device-pixel-ratio: 1.331) e (-webkit-max-device-pixel-ratio: 1.332)
  14. iPad 1 e 2, iPad Mini largura do dispositivo: 768px altura do dispositivo: 1024px -webkit-device-pixel-ratio: 1
  15. Largura do dispositivo iPad 3 e 4: altura do dispositivo 768px: 1024px - proporção do pixel do dispositivo da web: 2)
  16. Largura do dispositivo iPhone 3G: altura do dispositivo 320px: 480px - proporção do pixel do dispositivo da web: 1)
  17. Largura do dispositivo do iPhone 4: 320px de altura do dispositivo: 480px -webkit-device-pixel-ratio: 2)
  18. Largura do dispositivo do iPhone 5: 320px de altura do dispositivo: 568px -webkit-device-pixel-ratio: 2)
Web Designer cum Promotor
fonte
1
Sansung Galaxy S3 @media apenas tela e (largura do dispositivo: 720px) e (altura do dispositivo: 1280px) e (-webkit-min-device-pixel-ratio: 2) TESTADO e funcionou.
user2060451
5

Não é uma questão de contagem de pixels, é uma questão de tamanho real (em mm ou polegadas) de caracteres na tela, que depende da densidade de pixels. Portanto, "largura mínima:" e "largura máxima:" são inúteis. Uma explicação completa desse problema está aqui: o que exatamente é a proporção de pixels do dispositivo?

As consultas "@media" levam em consideração a contagem de pixels e a proporção de pixels do dispositivo, resultando em uma "resolução virtual", que é o que você deve levar em consideração ao criar sua página: se a fonte tiver 10 px de largura fixa e a " resolução horizontal virtual "é de 300 px, serão necessários 30 caracteres para preencher uma linha.

jumpjack
fonte
7
Ótimo. Então, quais devem ser as consultas da mídia?
PKHunter
4

Atualmente, o mais comum é ver dispositivos de tela retina, em outras palavras: dispositivos com alta resolução e uma densidade de pixels muito alta (mas geralmente menor que 15 cm do tamanho físico). É por isso que você precisará da retina exibir consultas de mídia especializadas em seu CSS. Este é o exemplo mais completo que eu poderia encontrar:

@media only screen and (min-width: 320px) {

  /* Small screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 

  /* Small screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 700px) {

  /* Medium screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 

  /* Medium screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 1300px) {

  /* Large screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 

  /* Large screen, retina, stuff to override above media query */

}

Fonte: Site CSS-Tricks

Ezequiel Adrian
fonte
4

Como existem muitos tamanhos de tela variados que sempre mudam e, provavelmente, sempre o melhor caminho a seguir é basear seus pontos de interrupção e consultas de mídia em seu design.

A maneira mais fácil de fazer isso é pegar o design completo da área de trabalho e abri-lo no seu navegador da web. Encolha a tela lentamente para torná-la mais estreita. Observe para ver quando o design começa a "quebrar" ou parece horrível e apertado. Nesse ponto, seria necessário um ponto de interrupção com uma consulta de mídia.

É comum criar três conjuntos de consultas de mídia para desktop, tablet e telefone. Mas se o seu design fica bem nos três, por que se preocupar com a complexidade de adicionar três consultas de mídia diferentes que não são necessárias? Faça isso conforme a necessidade!

Robert Rocha
fonte
3

Um recurso extra é que você também pode usar consultas de mídia no atributo de mídia da <link>marca.

<link href="style.css" rel="stylesheet">
<link href="justForFrint.css" rel="stylesheet" media="print">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">

Com isso, o navegador fará o download de todos os recursos CSS, independentemente do atributo de mídia . A diferença é que, se a consulta de mídia do atributo media for avaliada como falsa , o arquivo .css e seu conteúdo não serão bloqueados pela renderização.

Portanto, é recomendável usar o atributo de mídia na <link>tag, pois garante uma melhor experiência do usuário.

Aqui, você pode ler um artigo do Google sobre esse problema https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Algumas ferramentas que ajudarão você a automatizar a separação do seu código css em arquivos diferentes, de acordo com suas consultas de mídia

Webpack https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin

PostCSS https://www.npmjs.com/package/postcss-extract-media-query

Juanma Menendez
fonte
2

O comportamento não muda na área de trabalho. Mas em tablets e celulares, expanda a barra de navegação para cobrir a grande imagem do logotipo. Nota: Use a margem (superior e inferior) o quanto for necessário para a altura do logotipo.

Para o meu caso, 60px em cima e em baixo funcionou perfeitamente!

@media (max-width:768px) { 
  .navbar-toggle {
      margin: 60px 0;
  }
}

Verifique a barra de navegação aqui .

Pratik Khadloya
fonte
2
  • Aparelhos pequenos demais ~ Telefones (<768px)
  • Dispositivos pequenos ~ Tablets (> = 768px)
  • Dispositivos médios ~ Desktops (> = 992px)
  • Dispositivos grandes ~ Desktops (> = 1200 px)
Bekzat
fonte
2

Estou usando o seguinte para fazer o meu trabalho.

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6, 7, 8 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+, 7+, 8+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone X ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
Mayank Dudakiya
fonte
-1
@media (max-width: 767px)   {

      .container{width:100%} *{color:green;}-Mobile

    }


    @media (min-width: 768px)  {

     .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 768px) and (orientation:portrait)  {

       .container{width:100%} *{color:yellow  } -Mobile

    }
    @media (min-width: 1024px)  {

       .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 1200px)  {

    .container{width:1180px} *{color:pink   } -Desktop

    }
Shailesh
fonte