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

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?

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.

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.

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:

• Como ajustar o seu site para o iPad da Apple
• Consultas de mídia CSS3

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.

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) {

    }

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 */
}

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)

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.

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

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!

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

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 .

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

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 */
}

@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

    }