<div id="750px">
<a href="https://www.instagram.com/p/CKBoR2ZDlwL/" target="_blank" rel="external"><img src="img/camisas/camisa0001.png" alt="Camisa 1" id="camisa1" class="camisas_p1"></a>
<a href="https://www.instagram.com/p/CKGxsU0gHl_/" target="_blank" rel="external"><img src="img/camisas/camisa0002.png" alt="Camisa 2" id="camisa2" class="camisas_p1"></a>
</div>
-
é possível fazer com "media query"– Pedro SançãoCommented 24/01/2021 às 1:27
Adicione um comentário
|
1 Resposta
Pode usar jquery e fazer da seguinte forma
<div id="pixel" hidden="true">
<a href="https://www.instagram.com/p/CKBoR2ZDlwL/" target="_blank" rel="external"><img src="img/camisas/camisa0001.png" alt="Camisa 1" id="camisa1" class="camisas_p1"></a>
<a href="https://www.instagram.com/p/CKGxsU0gHl_/" target="_blank" rel="external"><img src="img/camisas/camisa0002.png" alt="Camisa 2" id="camisa2" class="camisas_p1"></a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
//Detecta resize da tela
$( window ).resize(function() {
var div = document.getElementById('pixel');
var w = $(window).width();
console.log(w);
if(w == 750){
div.hidden = false;
}else{
div.hidden = true;
}
});
</script>
Ou se preferir pode usar css
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
visibility: visible;
}
@media only screen and (min-width: 750px) {
div {
visibility: hidden;
}
}
</style>
</head>
<body>
<div>
<a href="https://www.instagram.com/p/CKBoR2ZDlwL/" target="_blank" rel="external"><img src="img/camisas/camisa0001.png" alt="Camisa 1" id="camisa1" class="camisas_p1"></a>
<a href="https://www.instagram.com/p/CKGxsU0gHl_/" target="_blank" rel="external"><img src="img/camisas/camisa0002.png" alt="Camisa 2" id="camisa2" class="camisas_p1"></a>
</div>
</body>
</html>
-
1