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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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