css - todos - media query min and max
Diferencia entre ancho y ancho de dispositivo en consultas de medios CSS (5)
¿Cuál es la diferencia (en términos simples) entre altura y anchura y ancho de dispositivo y altura de dispositivo?
El device-width describe la altura del dispositivo de salida (es decir, toda la pantalla o página, en lugar de solo el área de renderizado, como la ventana del documento).
Mientras que la propiedad CSS de height especifica la altura del área de contenido de un elemento. El área de contenido está dentro del relleno, el borde y el margen del elemento.
Fuente: https://developer.mozilla.org/en/CSS/
Para más información sobre consultas de medios, consulte: http://www.w3.org/TR/css3-mediaqueries/
Más que una respuesta tardía Espera que ayude a alguien
En los medios CSS, la diferencia entre el ancho y el ancho del dispositivo puede ser un poco confusa, por lo que vamos a exponerlo un poco. ancho del dispositivo se refiere al ancho del propio dispositivo , en otras palabras, la resolución de la pantalla del dispositivo . Digamos que la resolución de su pantalla es de 1440 x 900. Esto significa que la pantalla tiene 1440 píxeles de ancho, por lo que tiene un ancho de dispositivo de 1440px. La mayoría de los teléfonos móviles tienen un ancho de dispositivo de 480px o inferior, incluido el popular iPhone 4 (con ancho de dispositivo: 320px), a pesar de que técnicamente tiene una resolución de 640 x 960. Esto se debe a la pantalla Retina del iPhone 4, que contiene dos píxeles de dispositivo en cada píxel de CSS en la pantalla. Esto es cierto para el Ipad 3 también; su ancho de dispositivo reportado es de 768px al igual que sus predecesores, aunque su resolución de pantalla real es de 1536px x 2048px. En general, el ancho es más versátil cuando se trata de crear páginas web receptivas, aunque el ancho del dispositivo es útil cuando desea apuntar específicamente a dispositivos móviles (y no a escritorios con una pequeña ventana del navegador, por ejemplo)
a partir de developer.mozilla.org ,
ancho:
Valor: Medio: visual, táctil
Acepta prefijos min / max: siLa función de ancho de medios describe el ancho de la superficie de representación del dispositivo de salida (como el ancho de la ventana del documento o el ancho del cuadro de página en una impresora).
Nota: A medida que el usuario cambia el tamaño de la ventana, el navegador cambia las hojas de estilo según corresponda en función de las consultas de los medios utilizando las funciones de ancho y alto de los medios. !!!
Encontré este artículo muy interesante desde javascriptkit: http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml
Si define device-width significa que su css particular es una llamada cuando abre su página en iphone, ipad, ipod y dispositivo móvil. por ejemplo :
@media only screen and (max-device-width:480px){
body{
color:red;
}
}
o si define el ancho, lo que significa que su css particular es llamado cuando su ventana se redimensiona. por ejemplo :
@media only screen and (min-width: 481px) and (max-width: 1024px) {
body{
color:yellow;
}
}
para obtener más información, visite http://webdesignerwall.com/tutorials/css3-media-queries , http://x7.fi/2010/02/12/how-to-fit-your-website-for-the-apple-ipad/
Si está creando una aplicación multiplataforma (por ejemplo, utilizando phonegap / cordova), entonces,
No use ancho de dispositivo o altura de dispositivo. Más bien use el ancho o el alto en las consultas de medios CSS porque el dispositivo Android dará problemas en el ancho o en el alto del dispositivo. Para iOS funciona bien. Sólo los dispositivos Android no admiten dispositivo de ancho / dispositivo de altura.
device-width es el ...
ancho del dispositivo de salida (es decir, toda la pantalla o página, en lugar de solo el área de representación, como la ventana del documento).
El width ...
describe el ancho de la superficie de representación del dispositivo de salida (como el ancho de la ventana del documento o el ancho del cuadro de página en una impresora)