Perguntas de mídia: como direcionar desktop, tablet e móvel?

Se queres atingir um dispositivo, então escreve min-device-width. Por exemplo:

Para iPhone

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

Para comprimidos

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

• Como ajustar o seu site para o iPad da Apple
• consultas multimédia CSS3

Não vise dispositivos ou tamanhos específicos!

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

• desenvolver o site para mobile first Usando percentagens ou ems, não pixels,
• então tente-o numa janela maior e note onde começa a falhar,
• redesenhar o layout e adicionar uma consulta de mídia CSS só para lidar com as partes quebradas,
• repita o processo até que você chega ao ponto de paragem seguinte.

Pode utilizar responsivepx.com para encontrar os pontos de paragem 'naturais', como em 'os pontos de paragem estão mortos' por Marc Drummond.

Utilizar pontos de paragem naturais

Os' pontos de paragem ' tornam-se então o ponto real em que o seu design móvel começa a 'quebrar', ou seja, deixam de ser utilizáveis ou agradáveis visualmente. Uma vez que você tem um bom site móvel de trabalho, sem consultas de mídia, você pode parar de se preocupar com tamanhos específicos e basta adicionar pesquisas de mídia que lidam com visualizações sucessivamente maiores.

Se não está a tentar fixar um desenho a um tamanho exacto do ecrã, esta abordagem funciona por remover a necessidade de atingir dispositivos específicos. A integridade do próprio desenho em cada ponto de paragem ([7]} garante que se manterá em qualquer tamanho. Por outras palavras, se uma secção de menu/Conteúdo/o que quer que deixe de ser utilizável a um determinado tamanho, desenhe um ponto de paragem para esse tamanho, não para um dispositivo específico tamanho.

1. Eu usei este local para encontrar a resolução e desenvolver CSS por números reais. Meus números variam um pouco das respostas acima, exceto que o meu css realmente atinge os dispositivos desejados.

2. Além disso, tenha este código de depuração logo a seguir à sua pesquisa multimédia: Por exemplo:

   @media only screen and (min-width: 769px) and (max-width: 1281px) { /* 10 inch tablet enter here */
     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;
     }
   } 
   

   Tenho isto na Internet, não me lembro exactamente do site. Adicione este item de depuração em cada pesquisa multimédia e irá ver qual a pesquisa que está a ser aplicado.

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

    }

Pesquisas multimédia para pontos de paragem 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 Extra pequenos (telefones, até 480px)
2. pequenos dispositivos (comprimidos, 768px e up)
3. dispositivos médios (big landscape tablets, laptops e computadores de secretária, 992px e up)
4. dispositivos grandes (ecrãs grandes, 1200px e up)
5. Leitores de e-retrato( Nook/Kindle), comprimidos menores-min-Largura: 481px
6. tabletes de retrato, iPad de retrato, Leitores de paisagem-min-Largura: 641px
Comprimido, iPad paisagístico, laptops lo-res - min-Largura: 961px
7. HTC One device-width: 360px device-height: 640px-webkit-device-pixel-ratio: 3
8. Samsung Galaxy S2 device-width: 320px dispositivo-altura: 534px -webkit-device-pixel-ratio: 1.5 (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (razão min-dispositivo-pixel: 1, 5
9. dispositivo Samsung Galaxy S3-largura: 320px dispositivo-altura: 640px-webkit-dispositivo-pixel-razão: 2 (min -- moz-dispositivo-pixel-razão: 2), - navegadores Firefox mais antigos (anteriores ao Firefox 16) -
10. dispositivo Samsung Galaxy S4-largura: 320px dispositivo-altura: 640px-webkit-dispositivo-pixel-razão: 3
11. dispositivo LG Nexus 4-Largura: 384px dispositivo-altura: 592px-webkit-dispositivo-relação pixel: 2
12. Asus Nexus 7 dispositivo-largura: 601px dispositivo-altura: 906px - webkit-min-device-pixel-ratio: 1.331) e (- webkit-max-device-pixel-ratio: 1.332)
13. iPad 1 e 2, ipad Mini device-width: 768px device-height: 1024px-webkit-device-pixel-ratio: 1
14. iPad 3 and 4 device-width: 768px device-height: 1024px-webkit-device-pixel-ratio: 2)
15. dispositivo iPhone 3G-largura: 320px dispositivo-altura: 480px-webkit-dispositivo-relação pixel: 1)
16. dispositivo iPhone 4-Largura: 320px dispositivo-altura: 480px-webkit-dispositivo-relação pixel: 2)
17. dispositivo iPhone 5-Largura: 320px dispositivo-altura: 568px-webkit-dispositivo-relação pixel: 2)

As consultas"@media" têm em conta a contagem de pixels e a proporção de pixels do dispositivo, resultando numa "resolução virtual" que é o que você tem de ter em conta ao desenhar o seu página: se o seu tipo de letra tiver uma largura fixa de 10px e a "resolução horizontal Virtual" for de 300 px, serão necessários 30 caracteres para preencher uma linha.

Uma vez que há muitos tamanhos de tela variados que sempre mudam e muito provavelmente sempre vai mudar a melhor maneira de IR é basear seus pontos de paragem e mediaqueries em seu projeto.

A maneira mais fácil de fazer isto é pegar no seu design de ambiente de trabalho completo e abri-lo no seu navegador web. Encolhe a tela lentamente para torná-lo mais estreito. Observe para ver quando o projeto começa a, "quebrar", ou olhar horrível e apertado. Neste ponto, um ponto de ruptura com uma consulta de mídia seria necessario.

Seguir funcionou para mim. O comportamento não muda no ambiente de trabalho. Mas em tablets e móveis, eu expando a barra de navegação para cobrir a imagem de logotipo grande. Nota, use a margem (superior e inferior) tanto quanto você precisa para a altura do seu logotipo. Para o meu caso, o 60px de cima para baixo funcionou perfeitamente. Veja a barra de navegação.

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

Hoje em dia a coisa mais comum é ver dispositivos retina-Tela, em outras palavras: dispositivos com resoluções elevadas e uma densidade de pixels muito alta (mas geralmente menor que 6 polegadas de tamanho físico). É por isso que você vai precisar de retina exibir mídia especializada-consultas em seu CSS. Este é o exemplo mais completo que consegui 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: CSS-Tricks Website

Extra small devices ~ Phones (< 768px)
Small devices ~ Tablets (>= 768px)
Medium devices ~ Desktops (>= 992px)
Large devices ~ Desktops (>= 1200px)

@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

    }