@Media ancho mínimo y ancho máximo


225

Tengo esta @mediaconfiguración:

HTML :

<head>
  <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>

CSS :

@media screen and (min-width: 769px) {
    /* STYLES HERE */
}

@media screen and (min-device-width: 481px) and (max-device-width: 768px) { 
    /* STYLES HERE */
}

@media only screen and (max-device-width: 480px) {
    /* STYLES HERE */
}

Con esta configuración, funciona en el iPhone pero no funciona en el navegador.

¿Es porque ya tengo deviceen el meta, y tal vez tengo en su max-width:480pxlugar?


1
¿Cuál es el problema? Los estilos predeterminados serán aplicables a pantallas de más de 769 px.
Gurpreet Singh

simplemente elimine los @media screen and (min-width:769px){estilos normales de su navegador
Zoltan Toth

¿A qué te refieres con Zoltan? Y creo que podría resolverlo. Primero, el problema fue cuando cambié el tamaño de mi navegador con max-device: funcionaba en el teléfono pero no en el broswer, sin "dispositivo" funciona en ambos.
rallybilen

Básicamente, sin el "dispositivo" funciona tanto en el móvil / navegador, pero cuando agrego el dispositivo no puedo verlo en el navegador \
rallybilen

1
Debe ser 980pxno 960porque extremos tamaño del navegador al 980px.

Respuestas:


339

He encontrado que el mejor método es escribir su CSS predeterminado para los navegadores más antiguos, ya que los navegadores más antiguos incluyen 5.5, 6, 7 y 8. No se puede leer @media. Cuando uso @media lo uso así:

<style type="text/css">
    /* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
    @media only screen and (min-width: 960px) {
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width: 1440px) {
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width: 2000px) {
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width: 480px) {
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (device-width: 768px) {
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }
</style>

Pero puede hacer lo que quiera con su @media. Este es solo un ejemplo de lo que he encontrado mejor para mí al crear estilos para todos los navegadores.

iPad CSS especificaciones.

¡También! Si buscas imprimibilidad puedes usar@media print{}


16
¿Por qué has puesto pantallas 'mac'? ¡No solo las Macs "increíbles" pueden tener pantallas grandes de alta resolución!
Lucas

38

El problema subyacente es usar max-device-widthvs simple max-width.

El uso de la palabra clave "dispositivo" se dirige a la dimensión física de la pantalla, no al ancho de la ventana del navegador.

Por ejemplo:

@media only screen and (max-device-width: 480px) {
    /* STYLES HERE for DEVICES with physical max-screen width of 480px */
}

Versus

@media only screen and (max-width: 480px) {
    /* STYLES HERE for BROWSER WINDOWS with a max-width of 480px. 
       This will work on desktops when the window is narrowed.  */
}

11

Si el sitio web en dispositivos pequeños se comporta como la pantalla del escritorio, debe colocar esta metaetiqueta en el encabezado antes

<meta name="viewport" content="width=device-width, initial-scale=1">

Para consultas de medios, puede configurar esto como

esto cubrirá todos los anchos de su teléfono móvil / celular

    @media only screen and (min-width: 200px) and (max-width: 767px)  {
    //Put your CSS here for 200px to 767px width devices (cover all mobile portrait width //

    }

Para iPad y iPad pro tienes que usar

    @media only screen and (min-width: 768px) and (max-width: 1024px)  {
    //Put your CSS here for 768px to 1024px width devices(covers all iPad portrait width //

    }

Si desea agregar CSS para el modo horizontal, puede agregar esto

y (orientación: paisaje)

  @media only screen and (min-width: 200px) and (max-width: 767px) and (orientation : landscape) {
        //Put your CSS here for 200px to 767px width devices (cover all mobile landscape width //

        }

8

El valor correcto para el contentatributo debe incluir en su initial-scalelugar:

<meta name="viewport" content="width=device-width, initial-scale=1">
                                                   ^^^^^^^^^^^^^^^


2
Si pudiera explicar por qué y agregar referencias, eso haría que esta respuesta fuera más útil.
Michael Benjamin

2
@Michael_B La inicial era 'escalable por el usuario = no'. Eso lo dice todo lo que pienso.
Apolo Radomer

0

para algunos iPhone tienes que poner tu ventana gráfica así

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=0" />
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.