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>
Asked
Active
Viewed 5,330 times
1
David E. Luna M.
- 2,687
- 4
- 11
- 28
code2018
- 121
- 1
- 2
- 11
-
1Eso 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](https://es.stackoverflow.com/a/50787/29967) te puede ser de utilidad, especialmente el apartado titulado: **Media queries por grupos de dispositivos**. – A. Cedano Nov 23 '18 at 01: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 Oct 17 '19 at 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 Jan 29 '20 at 07: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 Jan 29 '20 at 07:17
2 Answers
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
}
Mario Perez
- 141
- 6
1
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){
}
Aarón Gutiérrez
- 2,432
- 1
- 6
- 12