1

Tengo el siguiente código en HTML y quisiera invalidar la clase y el id cuando se ingresa al sitio web con celulares, pero si ingresan con notebook, tablet o pc la clase si funcione. Sólo que quede invalidada cuando se ingresa con smartphones.

clase en el código: class="wyz-input wyz-select bus- 
    filter-locations-dropdown" 
id="wyz-cat-filter"

    <select id="wyz-cat-filter" name="category" class="wyz-input wyz-select bus- 
    filter-locations-dropdown">

4 respuestas 4

1

Como te han dicho puedes usar en css @media para editar algunos estilos dependiendo del tamaño de la pantalla, pero por lo que necesitas en vez de eso tendrías que comprobar el ancho de la pantalla con js y borrar o añadir esa clase e id; aquí tienes un ejemplo de como conseguir eso solo con javascript:

var mediaquery = window.matchMedia("(max-width: 800px)");
function funcion() {
  var div = document.querySelector(".grande");
  if (mediaquery.matches) {
    div.classList.remove("rojo");
    div.removeAttribute("id");
  } else {
    div.classList.add("rojo");
    div.setAttribute("id", "blanco")
  }
}
mediaquery.addListener(funcion);
.grande {width:500px;height:500px;border:1px solid black;}
.rojo {background:red;}
#blanco {color:white;}
<div class="grande rojo" id="blanco">
  Un cuadrado rojo con las letras blancas.
</div>

1

Lo que necesitas es la regla @media a esta le puedes indicar a partir de que medida (o rango) quieres que se apliquen ciertos estilos en tu clase CSS

Snippet tomado directamente de W3Schools - CSS @media Rule

body {
    background-color: yellow;
}

@media only screen and (min-width: 800px) {
    body {
        background-color: lightblue;
    }
}
<h1>The @media Rule</h1>

<p>Resize the browser window. When the width of this document is 600 pixels or less, the background-color is "lightblue", otherwise it is "yellow".</p>

0

JavaScript permite manejar las media queries de manera simple usando window.matchMedia().

Tendrías que remover ese id y clases del elemento sobre el cual están siendo aplicados y luego hacer lo siguiente en tu archivo javascript:

if (window.matchMedia("(min-width: 800px)").matches) {
  let el = document.querySelector('selector-elemento');
  el.classList.add('wyz-input wyz-select bus-filter-locations-dropdown);
  el.setAttribute("id", "wyz-cat-filter");
}

No olvides que necesitas identificar (o crear) ese selector-elemento para poder ubicar fácilmente al elemento.

0

Debes utilizar un @media que te permite consultar cosas como en ancho, alto y la orientacion y en base a eso aplicar estilos.

Como partiras de tu Website de escritorio y lo que quieres es mejorarlo cuando este en otro dispositivos puedes hacer lo siguiente

@media only screen and (max-width: 500px) { /* Aqui agregaras todos los estilos que necesitas */}

Lo que pongas dentro de @media solo funcionara cuando se cumpla la proporcion de 500px.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.