ti-enxame.com

Estilos css responsivos em dispositivos móveis SOMENTE

Estou tentando fazer com que meus estilos CSS responsivos funcionem somente em tablets e smartphones. Basicamente eu tenho um estilo para desktop, um estilo para celular: retrato e um estilo para celular: paisagem. Eu não quero que os estilos de dispositivos móveis interfiram na apresentação da área de trabalho. Já brinquei com inúmeras consultas de mídia, mas o resultado é que os estilos de dispositivos móveis são exibidos na área de trabalho ou os estilos de dispositivos móveis são exibidos apenas em dispositivos móveis, mas com apenas um conjunto de regras (sem resposta). Existe uma maneira que eu possa manter os dois completamente separados?

Meu código eu tenho agora é assim:

/* regular desktop styles */

@media only screen 
and (max-device-width: 600px)
 { ... }

/* mobile only styles when the device is 0-600px in maximum width */

@media only screen 
and (max-device-width: 1000px)
{ ... }

/* mobile only styles when the device is up to 1000px in maximum width */
18
jaspn

O que você tem lá deve ser bom para o trabalho, mas não há nenhuma consulta de mídia "É Mobile/Tablet" para que você esteja sempre preso.

consultas de mídia para pontos de interrupção comuns , mas com a variedade de dispositivos em constante mudança, eles não têm garantia de trabalhar em avanço.

A ideia é que o site mantenha a mesma marca em todos os tamanhos, portanto, você deve querer que os estilos se espalhem pelos pontos de interrupção e atualizem apenas as larguras e o posicionamento para melhor atender a essa viewport.

Para promover a resposta acima, usar o Modernizr com um teste sem toque permitirá que você segmente dispositivos de toque, que são provavelmente tablets e smart phones, mas com as novas versões de telas baseadas em toque que não são uma opção tão boa quanto antes .

9
justinavery

Por que não usar um intervalo de consulta de mídia?.

Atualmente estou trabalhando em um layout responsivo para meu empregador e os intervalos que estou usando são os seguintes:

Você tem seus principais estilos de área de trabalho no corpo do arquivo CSS (1024 px e acima) e, em seguida, para tamanhos de tela específicos que estou usando:

@media all and (min-width:960px) and (max-width: 1024px) {
  /* put your css styles in here */
}

@media all and (min-width:801px) and (max-width: 959px) {
  /* put your css styles in here */
}

@media all and (min-width:769px) and (max-width: 800px) {
  /* put your css styles in here */
}

@media all and (min-width:569px) and (max-width: 768px) {
  /* put your css styles in here */
}

@media all and (min-width:481px) and (max-width: 568px) {
  /* put your css styles in here */
}

@media all and (min-width:321px) and (max-width: 480px) {
  /* put your css styles in here */
}

@media all and (min-width:0px) and (max-width: 320px) {
  /* put your css styles in here */
}

Isso cobrirá praticamente todos os dispositivos em uso - eu me concentraria em obter o estilo correto para os tamanhos no final do intervalo (ou seja, 320, 480, 568, 768, 800, 1024), pois todos os outros serão responsivo ao tamanho disponível.

Além disso, não use px em qualquer lugar - use em ou%.

18
Ran

Sim, isso pode ser feito por meio da detecção de recursos de JavaScript (ou detecção de navegador, por exemplo, Modernizr ). Em seguida, use yepnope.js para carregar os recursos necessários (JS e/ou CSS)

4
Raptor

Eu tive que resolver um problema semelhante - eu queria que certos estilos se aplicassem apenas a dispositivos móveis no modo paisagem. Essencialmente, as fontes e o espaçamento entre linhas pareciam bons em todos os outros contextos, então eu só precisava da única exceção para o cenário móvel. Esta consulta de mídia funcionou perfeitamente:

@media all and (max-width: 600px) and (orientation:landscape) 
{
    /* styles here */
}
1
Alan Bellows