0
@media ( max-width : 900px ) {
//aqui van todos los estilos de aparatos que tengan un ancho entre 481 y 900px
}
@media ( max-width : 480px ) {
//aqui van todos los estilos de aparatos que tengan un ancho entre 0 y 480 
}

Es correcta esta sintaxis?? .. Estoy teniendo un pequeño problema..ya revisé todo mi código y lo único que se me ocurre es que mi sintaxis de mediaquery esté delimitando incorrectamente

9
  • ¿Qué problema estás teniendo? Si gustas copia tu código para ver cómo te puedo ayudar. Commented el 3 mar. 2019 a las 17:24
  • cuando estoy en la resolucion de tablet yo le establezco al HTML 16px , para que toda la pagina cuando esta en esa resolucion tenga como base los 16px....tengo varias secciones, y en todas, sus articulos no tienen establecido un tamaño de fuente sino que usan los 16 px por defecto de mi HTML para tablet......el problema lo estoy teniendo especificamente en IPHONE 5...cuando estoy en portrait no hay problema, pero cuando roto el aparato, la letra del articulo de la primera seccion se ve muy grande, como si fueran 18px, y los otros se ven normales...y no le establecido ningun tamaño al articulo
    – lalo2019
    Commented el 3 mar. 2019 a las 17:30
  • pienso que de repente mi mediaquery esta marcando mal los limites y por eso mi tablet me esta tomando el estilo de otra resolucion, sobretodo porque yo no le establecido ningun tamaño de fuente por defecto al articulo, sino que toma la del root o html...espero haberme explicado bien
    – lalo2019
    Commented el 3 mar. 2019 a las 17:33
  • probá con body { -webkit-text-size-adjust: 100%; } así si hay algún zoom descarado lo hace proporcional Commented el 3 mar. 2019 a las 17:52
  • 1
    este es mi META: <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    – lalo2019
    Commented el 3 mar. 2019 a las 17:57

2 respuestas 2

0

Te sugiero usar a Bootstrap de referencia. Funciona muy bien:

// Dispositivos muy pequeños
color: red;

// Dispositivos pequeños (576px y superior)
@media (min-width: 576px) { color: orange; }

// Dispositivos medianos (tablets, 768px y superior)
@media (min-width: 768px) { color: yellow; }

// Dispositivos grandes (desktops, 992px y superior)
@media (min-width: 992px) { color: green; }

// Dispositivos muy grandes (desktops con pantallas grandes, 1200px y superiores)
@media (min-width: 1200px) { color: blue; }
4
  • es igual a la mia...entonces esta bien mi sintaxis...debe ser otro el error........ese iphone 5 es una pesadilla.....primero no funciona el background size ni el attachment fixed y ahora me muestra diferentes tamaños de letra en dos contenedores que tienen el mismo tamaño heredado
    – lalo2019
    Commented el 3 mar. 2019 a las 17:44
  • ese orden debe ser??? los de menor resolucion al principio y los de mayor al final??? porque yo lo tengo al reves
    – lalo2019
    Commented el 3 mar. 2019 a las 18:55
  • La clave está en el planteamiento de preferencia de dispositivos. Si está pensado para que lo usen por móviles más frecuentemente que en desktop, sí. De menor a mayor. Commented el 4 mar. 2019 a las 1:24
  • Esta pensado para laptops...con razon cuando inverti las querys mi pagina casi se malogra.....se descuadro....ya lo regrese a como estaba
    – lalo2019
    Commented el 4 mar. 2019 a las 15:24
0

Recomendaría hacer lo siguiente:

  • Ver qué sale en el inspector de elementos de Safari simulando dispositivos. Esto se debe hacer en un Mac, Safari ya no soporta Windows.
  • Tenemos que revisar que esté entrando en el mediaquery, ya que puede que al girar el iPhone 5 tenga más de 900px de ancho (lo desconozco), para ello pongamos un background:blue !important; o un display: none !important; a algún elemento importante para ver si desaparece o se tiñe de azul.
  • También revisa que el Font no esté cambiando, puede que tengas un problema en la invocación del Font y iPhone no lo tenga y en consecuencia te esté mostrando un Font más grande, como Helvetica por ejemplo.
  • Sería bueno también probar colocando !important en el tamaño del Font por defecto, solo para probar, ver si quizás alguna librería agregada después te lo está sobreecribiendo, revisa el orden de invocación de tus css.

¡Dime si algo de esto te resulta! Quedo atento.

7
  • Pero lo raro de todo es que no aumenta el tamaño de los articulos de otras secciones. O sea te explico brevemente: En la media query para tablets establezco 16px de fuente en el HTML, para que todos los elementos hereden eso como base..Luego en mi seccion uno mis articulos no tienen tamaño establecido sino que toman el tamaño por defecto (16px) y sin embargo la letra del articulo de esa seccion es mas grande (digamos 18px), pero los otros articulos de las otras secciones no se ven afectados...esos articulos tampoco tienen establecido un tamaño, sino q heredan los 16 del root y se ven correctos
    – lalo2019
    Commented el 3 mar. 2019 a las 17:50
  • este problema esta ocurriendo en iphone 5...pero solo cuando lo roto, porque en portrait se ve perfecto..eso es lo raro.....y en samsung se ve bien en landscape y portait
    – lalo2019
    Commented el 3 mar. 2019 a las 17:51
  • La primera de las revisiones que te comento va orientada a que veamos lo que de verdad te está mostrando el iPhone, uno puede ver las letras más grandes, pero eso no necesariamente es lo que está pasando. El dispositivo se comportará distinto en portrait donde probablemente tiene un width de menos de 480px versus wide donde podría tener más de 900px de ancho. El tercer punto y cuarto punto que te comento van orientados a ver si está heredando bien. Commented el 3 mar. 2019 a las 17:56
  • el iphone 5 tiene 320 x 568...cuando esta en portrait aplica los estilos del mediaquery para movil (max-widht : 480px) y cuando rota aplica los estilos de tablet (max-width: 900px)
    – lalo2019
    Commented el 3 mar. 2019 a las 18:00
  • 1
    algo que he observado es que cuando entra a la pagina arriba en la url dice "modo lectura" o algo asi...no se si eso tenga que ver
    – lalo2019
    Commented el 3 mar. 2019 a las 18:01

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.