Como fazer uma página web móvel amigável com as consultas de mídia css

eu adicionei algumas consultas de mídia css mas parece não fazer nenhuma alteração, quero dizer eu adicionei este código 

@media screen and (min-width:10px) and (max-width:640px) {
.leftSideBar{display:none !important;}
.rightSideBar{display:none !important;}
}

mas as barras laterais esquerda e direita ainda estão visíveis. eu também tentei mudar o intervalo de min-width e max-width ainda não faz qualquer diferença, estou a perder alguma coisa aqui ? tenho de acrescentar algo mais do que isto no meu css para que funcione ?

abaixo é dado o meu css padrão para ambas as classes 

.leftSideBar{display:block !important;}
.rightSideBar{display:block !important;}
Author: tina, 2015-06-28
Source

4 answers

O meu conselho seria testar o código num telemóvel verdadeiro e não com um navegador se é isso que está a fazer porque os navegadores se comportam de forma diferente

Outra coisa importante que tem de fazer é adicionar uma marca de porta de meta-view sem que ela não funcione como a indicada em baixo 

<meta name="viewport" content="width=device-width, initial-scale=1" />

Remover !importante do seu css por Omissão use a especificidade de css em vez disso, se for realmente necessário para que o seu css por omissão seja 

.leftSideBar{display:block;}
.rightSideBar{display:block;}
Se isso não resultar, tens de nos mostrar tudo. css ou html para identificar o problema
 6
Author: Dinny Paul, 2015-06-30 16:22:12
Parece estar tudo bem no seu código. Tente com este meta no seu html: 
<meta name="viewport" content="width=device-width, initial-scale=1" />
Além disso, se puder dar-te um conselho, tenta o telemóvel primeiro. Parece isto: 
.leftSideBar{display:none !important;}
.rightSideBar{display:none !important;}

@media screen and (min-width:640px) {
  /*design for screen-width >= 640px */
}

Isto dá prioridade aos dispositivos móveis para que os computadores sejam definidos como excepção, a fim de ter menos código executado em dispositivos móveis que são muito menos potentes do que um computador;] aqui está um pequeno / grande tutorial em mobile first approach : http://www.html5rocks.com/en/mobile/responsivedesign/

Boa sorte e dê o seu html e css completo se ainda não estiver a funcionar.
 1
Author: Gunthari, 2015-06-28 07:47:08

Os min-width e !important são provavelmente inúteis. A consulta está bem, mas pode ser abreviada para apenas: 

@media screen and (max-width:640px) {
.leftSideBar, .rightSideBar {display:none}
}

Deve estar a funcionar de qualquer maneira. Tens a certeza que o html está bom? Talvez queiras mostrar isso aqui também.

 1
Author: Lucian Davidescu, 2015-06-30 16:23:28

Este código é o melhor para a web móvel sensível: 

<meta name="viewport" content="width=device-width, initial-scale=1" />
 0
Author: abhishek, 2015-10-14 05:00:43