1

Estoy programando la versión móvil de mi web, pero no sé a partir de qué ancho ya se considera tablet o celular.

¿Cómo puedo saberlo?

<style>
  @media (max-width: 600px) {
    .facet_sidebar {
      display: none;
    }
  }
</style>
4
  • 1
    Eso puede depender de muchos factores, por ejemplo, cada fabricante puede dar tamaños específicos según su tipo de dispositivo. Lo recomendable sería que apliques los media queries oficiales para cada grupo de dispositivos. Creo que esta respuesta te puede ser de utilidad, especialmente el apartado titulado: Media queries por grupos de dispositivos.
    – A. Cedano
    el 23 nov. 2018 a las 1:41
  • solo un apunte: desde hace ya tiempo los moviles tienen resoluciones equivalentes a las de los ordenadores, por lo que las distinciones entre dispositivos respecto al tamaño de pantalla no son una referencia correcta. Habria que plantearse otra serie de comprobaciones, como identificar el dispositivo en si y su orientacion.
    – Jakala
    el 17 oct. 2019 a las 22:18
  • Si quieres hacer una media-queries personalizadas no tiene que ser según el las resoluciones, si no según tu web. Para esto yo hago dos cosas:
    – kmevi10
    el 29 ene. 2020 a las 7:03
  • 1.- Abro mi página, pulso F12 y voy disminuyendo el tamaño hasta ver el salto de contenido de la web, que, localizados los px exactos puedo hacer la media query. 2.- La otra forma es usar BootStrap, la cual es más fácil y más profesional, ya que usa mobile-first y van a empezar a posicionar mejor las webs con mobile first. BootStrap nos ofrece maquetado para pantallas muy pequeñas, pequeñas, medianas, grandes y muy grandes. Así no tendrás más problemas.
    – kmevi10
    el 29 ene. 2020 a las 7:17

2 respuestas 2

2

Los breakpoints comunes y que usa bootstrap 4 en adelante son los siguientes:

/* Escritorio extra grande */
@media only screen and (min-width: 1200px){

}
/* Escritorio grande */
@media only screen and (min-width: 992px) and (max-width: 1199px){

}

/* Escritorio pequeño / tablet */
@media only screen and (min-width: 768px) and (max-width: 991px){

}

/* Tablets y phablets */
@media only screen and (min-width: 576px) and (max-width: 767px){

}

/* Teléfonos */
@media only screen and (max-width: 575px){

}
1

yo por lo general utilizo este CSS base, y despues puedes ir agregando queries mas especificos de ser ne

/* 
  ##Dispositivo = Desktops
  ##Resolucion = 1281pxo mayorresolusion desktops
*/

@media (min-width: 1281px) {
  
  //CSS
  
}

/* 
  ##Dispositivo = Laptops, Desktops
  ##Resolucion = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
  
  //CSS
  
}

/* 
  ##Dispositivo = Tablets, Ipads (vertical)
  ##Resolucion = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
  
  //CSS
  
}

/* 
  ##Dispositivo = Tablets, Ipads (horizontal)
  ##Resolucion = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: horizontal) {
  
  //CSS
  
}

/* 
  ##Dispositivo = Tablets de baja resolucion y telefnos Mobiles (horizontal)
  ##Resolucion = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  
  //CSS
  
}

/* 
  ##Dispositivo = Mayoria de telefonos moviles (vertical)
  ##Resolucion = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
  
  //CSS
  
}

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.