@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?

css mobile media-queries

— rallybilen
fuente

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.

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{}

— bashleigh
fuente

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.  */
}

— jpostdesign
fuente

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 //

        }

— Rohit Kaushik
fuente

8

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

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

Expandir fragmento

— Ksenia Titova
fuente

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" />

— NuggaN85
fuente