Consultas de mídia: como segmentar computadores, tablets e celulares?

https://stackoverflow.com/questions/6370690

28-10-2019
|

Pergunta

Tenho feito pesquisas sobre consultas de mídia e ainda não entendo muito bem como direcionar dispositivos de determinados tamanhos.

Desejo ser capaz de segmentar computadores, tablets e celulares.Eu sei que haverá algumas discrepâncias, mas seria bom ter um sistema genérico que pudesse 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)

O que você acha que esses 'pontos de interrupção' devem ser para cada dispositivo?

Solução

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

Editar : 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 designers convertem pixels em ems, em grande parte os b / c ems têm melhores recursos para o zoom.No zoom padrão, 1em === 16px.Multiplique os pixels por 1em/16px para obter o ems.Por exemplo, 320px === 20em.

Em resposta ao comentário, min-width é padrão no design "mobile-first", em que você começa projetando para as telas menores e, em seguida, adiciona consultas de mídia cada vez maiores, trabalhando em telas cada vez maiores.Independentemente de você preferir min-, max- ou combinações dos mesmos, esteja ciente da ordem de suas regras, tendo em mente que se várias regras corresponderem ao mesmo elemento, as regras posteriores substituirão as regras anteriores.

Outras dicas

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

Para iPhone

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

Para tablets

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

Aqui estão alguns bons artigos:

Não segmente dispositivos ou tamanhos específicos!

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

desenvolver o site para dispositivos móveis primeiro usando porcentagens ou ems, não pixels ,
em seguida, tente em uma janela de visualização 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 responsivepx.com para encontrar os pontos de interrupção 'naturais', como em 'breakpoints are dead' by Marc Drummond .

Use pontos de interrupção naturais

Os 'pontos de interrupção' então se tornam o ponto real em que o design do seu celular começa a 'quebrar' , ou seja, deixa de ser utilizável ou visualmente agradável. Depois de ter um site móvel funcionando bem, sem consultas de mídia, você pode parar de se preocupar com tamanhos específicos e simplesmente adicionar consultas de mídia que lidam com janelas de visualização cada vez maiores.

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

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

Use marcação semântica

Além disso, quanto mais mais simples e semântica a estrutura DOM com nav, header, main, section, footer etc. (evitando abominações como div class="header" com tags div aninhadas) mais fácil será para a engenharia responsividade, especialmente evitando flutuações usando CSS Grid Layout (Sarah Drasner's gerador de grade é uma ótima ferramenta para isso) e flexbox para organizar e reordenar de acordo com seu plano de design RWD.

Usei este site para encontrar a resolução e desenvolvi CSS de acordo com os números reais. Meus números variam um pouco das respostas acima, exceto que meu CSS realmente atinge os dispositivos desejados.

Além disso, tenha este código de depuração logo após sua 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 este item de depuração a cada consulta de mídia e você verá qual consulta foi 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 de dispositivos

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

Dispositivos extra pequenos (telefones, até 480px)
Dispositivos pequenos (tablets, 768px e superior)
Dispositivos médios (grandes tablets de paisagem, laptops e desktops, 992px e superior)
Dispositivos grandes (desktops grandes, 1200 px e superior)
e-leitores de retrato (Nook / Kindle), tablets menores - largura mínima: 481 px
tablets em retrato, iPad em retrato, leitores eletrônicos em paisagem - largura mínima: 641 px
tablet, paisagem iPad, laptops de baixa resolução - largura mínima: 961 px
HTC One device-width: 360px device-height: 640px -webkit-device-pixel-ratio: 3
Samsung Galaxy S2 device-width: 320px device-height: 534px -webkit-device-pixel-ratio: 1,5 (min - moz-device-pixel-ratio: 1,5), (-o-min-device-pixel -Razão: 3/2), (proporção mínima do dispositivo-pixel: 1,5
Samsung Galaxy S3 device-width: 320px device-height: 640px -webkit-device-pixel-ratio: 2 (min - moz-device-pixel-ratio: 2), - Navegadores Firefox mais antigos (anteriores ao Firefox 16 ) -
Samsung Galaxy S4 largura do dispositivo: 320 px altura do dispositivo: 640 px -webkit-device-pixel-ratio: 3
LG Nexus 4 device-width: 384 px device-height: 592 px -webkit-device-pixel-ratio: 2
largura do dispositivo Asus Nexus 7: 601 px altura do dispositivo: 906 px -webkit-min-device-pixel-ratio: 1,331) e (-webkit-max-device-pixel-ratio: 1,332)
iPad 1 e 2, largura do dispositivo iPad Mini: 768px device-height: 1024px -webkit-device-pixel-ratio: 1
iPad 3 e 4 largura do dispositivo: 768px device-height: 1024px -webkit-device-pixel-ratio: 2)
iPhone 3G device-width: 320px device-height: 480px -webkit-device-pixel-ratio: 1)
iPhone 4 device-width: 320px device-height: 480px -webkit-device-pixel-ratio: 2)
iPhone 5 device-width: 320px device-height: 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) dos caracteres na tela, que depende da densidade de pixels. Portanto, "min-width:" e "max-width:" são inúteis. Uma explicação completa desse problema está aqui: o que exatamente é a proporção de pixels do dispositivo?

As consultas "@mídia" 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ê realmente deve levar em consideração ao projetar sua página: se sua fonte tiver largura fixa de 10 pixelse a "resolução horizontal virtual" é de 300 px, serão necessários 30 caracteres para preencher uma linha.

Uma vez que existem vários tamanhos de tela que sempre mudam e muito provavelmente sempre mudam, a melhor maneira de fazer é basear seus pontos de interrupção e consultas de mídia no seu design.

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

É comum criar três conjuntos de consultas de mídia para desktop, tablet e telefone.Mas se o seu design parece bom em todos os 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 necessário!

Hoje em dia o mais comum é ver dispositivos com tela de retina, ou seja: dispositivos com altas resoluções e uma densidade de pixels muito alta (mas geralmente menores que 6 polegadas de tamanho físico).É por isso que você precisará de consultas de mídia especializadas de exibição de retina em seu CSS.Este é o exemplo mais completo que pude 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

O comportamento não muda no desktop.Mas em tablets e celulares, eu expando a barra de navegação para cobrir a grande imagem do logotipo. Observação: use a margem (superior e inferior) o quanto for necessário para a altura do logotipo.

Para o meu caso, 60px superior e inferior funcionaram perfeitamente!

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

Verifique a barra de navegação aqui .

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

<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 mídia . A diferença é que se a consulta de mídia do atributo de mídia for avaliada como falsa , então aquele arquivo .css e seu conteúdo não bloquearão a renderização.

Portanto, é recomendável usar o atributo media na tag <link>, uma vez que 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 o ajudarão a automatizar a separação de 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- consulta

Dispositivos muito pequenos ~ telefones (<768px)
Dispositivos pequenos ~ Tablets (>= 768px)
Dispositivos médios ~ desktops (>= 992px)
Dispositivos grandes ~ desktops (>= 1200px)

Estou usando o seguinte para fazer 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

    }

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow