CSS Media Screen Media Queries

[Fernando Cardoso de Melo]

Olá. Tenho pouca experiencia. Estou tentando fazer um teste aqui com media screen. Seguinte código:

<style type="text/css">
@media (max-width: 800px)

{

#base { display: none; }
}
</style>

 

Onde "#base" é uma simples tabela. Pelo que entendo "max-width: 800px" fará com que a "#base" desapareça em resolução máxima de 800px. Logo em resolução acima de 800px ela deve manter visivel. Até aí tudo normal. Se testo no PC que está com largura de 1024px ela continua visivel. Contudo ao testar em um celular onde a tela tem largura de 720px ela continua visivel. 

Link para teste www.upcomputadores.com.br/teste.html

Em resumo: O que preciso é que essa table apareça em resolução acima de 800px e desapareça em resolução abaixo de 800px. Alguém sabe o que pode estar errado?

[DiF]

@Fernando Cardoso de Melo

Olá,

 

experimenta colocar desta forma:

@media screen and (max-width: 800px) {
  #base {
    display: none;
  }
}

a diferença é o termo  "screen and" que é usado pelas telas de computador, tablets, smartphones.. etc.

Aqui funcionando: https://jsfiddle.net/dife/a8j1bnrk/3/    Arraste para o lado direito a barra de divisa da parte branca até sumir a tabela.

[Fernando Cardoso de Melo]

@DiF Eu já havia tentado isso. Se reduzo a tela do navegador realmente ele some. O problema é que se acesso no celular ela num some.

adicionado 27 minutos depois

25 minutos atrás, Fernando Cardoso de Melo disse:

@DiF Eu já havia tentado isso. Se reduzo a tela do navegador realmente ele some. O problema é que se acesso no celular ela num some.

Consegui fazer!!!

Faltava essa tag:

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

 

[Fernando Cardoso de Melo]

Em 02/08/2019 às 11:36, Fernando Cardoso de Melo disse:

@DiF Eu já havia tentado isso. Se reduzo a tela do navegador realmente ele some. O problema é que se acesso no celular ela num some.

adicionado 27 minutos depois

Consegui fazer!!!

Faltava essa tag:

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

 

Não deu certo! Pensei que tinha funcionado mas não funcionou como eu queria. Com esse código ele até funciona mas quando testado no celular, ele aumenta o zoom da tela. Eu tenho outro código que usava para redirecionar para outra página. Se tivesse uma forma de adaptar para ao invés de redirecionar ele ocultar uma div seria perfeito. Segue aí:

<script language="JavaScript" type="text/javascript">
  if (screen.width >= "800") {
    window.location.href = "desktop/index.html";
  }
  </script>	

Ao invés de "window.location.href" outro código que escondesse uma div. O que acha?

[Fernando Cardoso de Melo]

Olá. Gente vou abrir este tópico para ver se alguem conhece um jeito de fazer isso.

Tenho esse script:

<script language="JavaScript" type="text/javascript">
  if (screen.width >= "800") {
    window.location.href = "desktop/index.html";
  }
  </script>	

O que ele faz é redirecionar a página para outro endereço caso a resolução da tela seja maior ou igual a 800px. Note que estamos falando da resolução da tela e não do tamanho da janela do navegador.

Bom o que eu quero é esconder uma div caso a resolução seja maior ou igual a 800px. Quero usar exatamente o mesmo script contudo ao invés de redirecionar quero esconder uma div.

Amigos com @media queries não da certo porque se baseia no tamanho da janela do navegador e não é isso que quero. Preciso me basear na resolução da tela toda.

Notem que screen.width no script refere-se ao tamanho da tela toda. Preciso acrescentar o comando para ocultar uma div ao invés de redirecionar.

Algum fera aí sabe essa?

[DiF]

@Fernando Cardoso de Melo Não sei bem se entendi, mas você só precisa adicionar a função de esconder um elemento ou manipular o CSS com display none do jquery.

 

Podes fazer isso é uma linha, com o if ternário:

$(document).ready(function(){
  (screen.width >= 800) ? $(".teste").css({"display":"none"}) : "";
};

ou

$(document).ready(function(){
  (screen.width >= 800) ? $(".teste").hide() : "";
};

o  ".teste" é a class de um elemento div que coloquei só para testes... coloque a class do elemento que você quer esconder.

[Fernando Cardoso de Melo]

17 horas atrás, DiF disse:

@Fernando Cardoso de Melo Não sei bem se entendi, mas você só precisa adicionar a função de esconder um elemento ou manipular o CSS com display none do jquery.

 

Podes fazer isso é uma linha, com o if ternário:

$(document).ready(function(){
  (screen.width >= 800) ? $(".teste").css({"display":"none"}) : "";
};

ou

$(document).ready(function(){
  (screen.width >= 800) ? $(".teste").hide() : "";
};

o  ".teste" é a class de um elemento div que coloquei só para testes... coloque a class do elemento que você quer esconder.

Pode me fazer um favor...Eu tenho pouca experiência em JS. Pode colocar para mim como ficaria isso completo adaptado ao script que eu já tenho?

Um detalhe: No script que eu uso atualmente não preciso fazer chamada ao jquery.js.

[DiF]

@Fernando Cardoso de Melo

56 minutos atrás, Fernando Cardoso de Melo disse:

. Pode colocar para mim como ficaria isso completo adaptado ao script que eu já tenho?

Mas eu já fiz isso. só apenas altere a parte  $(".teste").hide()  ou  $(".teste").css({"display":"none"})

onde o  .teste é a classe do elemento que você quer esconder.

 

<div class="teste"></div>

 

57 minutos atrás, Fernando Cardoso de Melo disse:

No script que eu uso atualmente não preciso fazer chamada ao jquery.js.

Isso que dizer que você já está importando o jquery.js certo?

Estas duas funções usam o jquery... então você tem que  ter ele importado no seu index.html

 

[Fernando Cardoso de Melo]

DiF

Se eu fiz certo não está funcionando. Foz os seguintes exemplos:

https://jiujitsuejudo.com.br/teste.html (Este link em tela menor ou igual a 800 vai ser direcionando para https://jiujitsuejudo.com.br/teste2.html

Acesse https://jiujitsuejudo.com.br/teste.html em um celular e verá que vai redirecionar.

Esse é o script que eu já uso.

Coloquei o seu script em https://jiujitsuejudo.com.br/teste3.html onde acessado em telas maior ou igual a 800 (desktop por exemplo) a div azul teria que sumir. No meu exemplo eu só mudei para <=.

Por favor DiF veja se fiz certo.

[DiF]

@Fernando Cardoso de Melo

Veja,  este é o código-fonte do arquivo teste3.html

 

<html>
<head>

<script language="JavaScript" type="text/javascript">
  $(document).ready(function(){
  (screen.width >= 800) ? $(".teste").hide() : "";
};
  </script>	

<meta charset="utf-8">
<title>Teste</title>
<style type="text/css">
#teste {
	position: absolute;
	width: 200px;
	height: 115px;
	z-index: 1;
	background-color: #0000FF;
}
</style>
</head>

<body>
<div id="teste">Esta div deve sumir em tela de 800px ou maior</div>
</body>
</html>

 

O erro que tem aí,  é que no código javascript, está apontando para uma classe do elemento div.  Mas no seu html. você colocou ID ao invés de classe.

 

exemplo com ID:

<div id="teste">Esta div deve sumir em tela de 800px ou maior</div>

Exemplo com classe:

<div class="teste">Esta div deve sumir em tela de 800px ou maior</div>

 

Então quando temos um atributo ID, no jquery, você referencia com #(hashtag) quando é classe, usa-se o " . "(ponto)

 

("#teste") é para id,   (".teste") é para classe.

 

Também, tem um erro de sintaxe no código jquery, que na verdade foi culpa minha por não perceber. rsrs

Faltou um fechamento de parenteses no último fechamento de chave da chamada. Veja o código mais abaixo, corrigido.

 

Ademais, o mais importante não está ali, que é a importação da biblioteca jQuery. O código usa funções dele. Então é obrigatório.

 

Deixa o código desta forma que vai funcionar:

 

 

  

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">
  $(document).ready(function(){
    (screen.width >= 800) ? $("#teste").hide() : "";
   });
  </script>	

<meta charset="utf-8">
<title>Teste</title>
<style type="text/css">
#teste {
	position: absolute;
	width: 200px;
	height: 115px;
	z-index: 1;
	background-color: #0000FF;
}
</style>
</head>

<body>
<div id="teste">Esta div deve sumir em tela de 800px ou maior</div>
</body>
</html>

 

[Fernando Cardoso de Melo]

DiF funcionou!!

Deu certo!

Agora me surgiu uma outra questão interessante:

 

Quando eu uso o script para redirecionar não é necessário chamar o jquery.min.js. Contúdo na sua adaptação reparei que a chamada é necessária.

 

Sabe me explicar o porque disso DiF?

[DiF]

@Fernando Cardoso de Melo

 

1 hora atrás, Fernando Cardoso de Melo disse:

Quando eu uso o script para redirecionar não é necessário chamar o jquery.min.js. Contúdo na sua adaptação reparei que a chamada é necessária.

 

Sabe me explicar o porque disso DiF?

Sim.  No seu script,  você usa apenas o javascript puro.

 

if (screen.width <= "800") {
    window.location.href = "teste2.html";
  }

Nesse caso aí, não foi usado o jQuery. Mas no meu script, as funções utilizadas  como hide() é uma função exclusiva do jQuery.

 

Note, que  o jQuery é uma biblioteca em javascript que possibilita que faças as coisas da forma mais simples possível, economizando linhas.  Ele é tão bom, que você pode adicionar efeitos e manipular elementos de forma bem fácil.

 

NO javascript puro, o que você faria em  5 a 10 linhas para esconder algum elemento ou colocar um efeito de fade out, no jQuery você pode fazer em 3 linhas.

 

lembre, que nem sempre usar o jQuery é uma boa escolha.  Mas posso afirmar que 90% dos sites, usam e abusam do jQuery ou similares( existem outros frameworks como o jquery)

 

Quando puder, recomendo comprar o livro do Maurício Samy Silva, pela editora Novatec, o livro sobre o jQuery.  é uma ótima leitura com muitos exemplos.

Também recomendo pelo mesmo autor, e editora o livro Ajax e jQuery.

[Fernando Cardoso de Melo]

Ok DiF. Obrigado por tudo. Aprendi um pouco. Sabe que o objetivo final disso tudo é duas divs. Uma com uma versao de site para mobile e outra para desktop. No caso de usar media queries não deu certo pois ele usa o tamanho da janela do navegador que nem sempre tem a mesma resolução da tela. Aí coloco viewport com device-witdth e isso aumenta o tamanho dos elementos da página. Enfim...com media queries não consegui fazer.

Veleu mesmo.

[DiF]

@Fernando Cardoso de Melo Na verdade, o que pode ter havido aí é algum conflito de regras no css, e tem que usar sim o viewport... 

 

O media querie foi feito justamente para resolver esse problema com diversas resoluções. 

É estranho que não tenha dado certo, pois a resolução no navegador é baseado na resolução da tela do usuário.

Então deveria funcionar, quando um usuário redimensionasse a tela do navegador.

 

o meta do viewport que uso é:

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

O lance desse meta está na escala inicial e na escala máxima.  initial-scale e maximum-scale.

o width é definido pelo device-width ou seja, pela largura do próprio dispositivo.

Com isso, qualquer media querie que colocar no seu css quem funcionar em todos os dispositivos.. pc. laptop, tablet, smartphone...

 

A solução que eu dei a você antes, é como se fosse uma gambiarra. Não é ideal fazer isso pelo javascript... o CSS é muito mais rápido para renderizar.

 

Recomendo comprar o livro do Marício Samy Silva, editora Novatec, CSS3  a partir da página 255 que é o capítulo sobre o média querie

A capa do livro é esta:

 

Todos os livros que lhe recomendei aqui, eu possuo e são ótimos para aprendizado, desde o mais iniciante até o mais experiente.

 

[Fernando Cardoso de Melo]

Ok. Mais uma vez obrigado por tudo.

 

Abraço