Professional Documents
Culture Documents
CSSmediaqueriesCSS|MDN
CSSmediaqueries
Unamediaqueryconsisteenuntipodemedioyalmenosunaconsultaquelimitalashojasdeestilo
utilizandocaractersticasdelmediocomoancho,altoycolor.AadidoenCSS3,lasmediaqueriesdejan
quelapresentacindelcontenidoseadapteaunrangoespecficodedispositivosdesalidasintenerque
cambiarelcontenidoens.
Sintaxis
LasMediaqueriesconsistendeunmediatypeyunaomasexpresiones,implicandocaractersticasdel
medio,lacualseresuelvecomoverdaderaofalsa.Elresultadodelaconsultaesverdaderasieltipode
medioespecificadoenelmediaqueryconcuerdaconeltipodedispositivoqueestsiendomostradoy
todaslasexpresionesenelmediaquerysonverdaderas.
1
2
<!CSSmediaqueryonalinkelement>
<linkrel="stylesheet"media="(maxwidth:800px)"href="example.css"/>
3
4
5
6
7
8
9
10
11
<!CSSmediaquerywithinastylesheet>
<style>
@media(maxwidth:600px){
.facet_sidebar{
display:none;
}
}
</style>
Cuandounamediaqueryesverdadera,lahojadeestilocorrespondienteoreglasdeestilosson
aplicadas,siguiendolasreglasnormalesdecascada.
Cuandonotnionlysonusadasdentrodeunaquery,eltipodemedioesopcionalyserinterpretada
comoall.
OperadoresLgicos
Sepuedenredactarqueriesutilizandooperadoreslgicos,incluyendonot,and,yonly.
https://developer.mozilla.org/es/docs/CSS/Media_queries
1/16
27/7/2015
CSSmediaqueriesCSS|MDN
Ademssepuedecombinarmltiplesqueriesenunalistaseparadaporcomasmltiplessicualquierade
lasqueriesenlalistaesverdadera,lahojadeestiloasociadaesaplicada.Estoesequivalenteauna
operacinlgica"or".
and
Eloperadorandesusadoparacolocarjuntasmltiplesfuncionesmultimedia.Unquerybsicoconeltipo
demedioespecificadocomoallpuedeluciras:
@media(minwidth:700px){...}
Siustedquiereaplicaresequerysolosilapantallaestaenformatohorizontal,ustedpuedeutilizarel
operadorandycolocarlasiguientecadena:
@media(minwidth:700px)and(orientation:landscape){...}
Lasiguientequerysoloretornaraverdaderosilaventanatieneunanchode700pxomasylapantalla
estaenformatohorizontal.AhorasiustedquiereaplicarestaopcinsolositipodemedioesTV,usted
puedeutilizarlasiguientecadena:
@mediatvand(minwidth:700px)and(orientation:landscape){...}
EstaquerysoloseaplicasieltipodemedioesTV,laventanatiene700pxdeanchoomasylapantalla
estaenformatohorizontal.
@media(minwidth:700px),handheldand(orientation:landscape){...}
Porlotanto,siestaenunascreenconunaventanade800pxdeancho,ladeclaracindelmedio
https://developer.mozilla.org/es/docs/CSS/Media_queries
2/16
27/7/2015
CSSmediaqueriesCSS|MDN
retornaraverdaderodebidoalaprimerapartedelalista,siaplicamosestoaundispositivo@mediaall
and(minwidth:700px)podraretornarverdaderoapesardelhechodequelapantallafallela
verificacintipodemediodelhandheldenlasegundaquery.Porotrapartesiestuvieseenunhandheld
conunanchodeventanade500px,laprimerapartedelalistafallaraperolasegundaparteretornara
verdaderodebidoaladeclaracindemedio.
not
Eloperadornotaplicaatodoelqueryyretornaverdaderosiesposibleysinoretornafalso(comopor
ejemplomonochromeenunmonitoracolorounaventanaconunanchomnimodeminwidth:700px
enunmonitorde600px).Unnotnegaraunquerysiesposibleperonoatodoslosqueryposiblessi
estnubicadosenunalistaseparadaporcomas.Eloperadornotnopuedeserusadoparanegarun
queryindividual,soloparaunquerycompleto.Porejemplo,elnotenelsiguientequeryesevaluadoal
final:
@medianotalland(monochrome){...}
Estosignificaqueelqueryesevaluadodelasiguienteforma:
@medianot(alland(monochrome)){...}
...ynodeestaforma:
@media(notall)and(monochrome){...}
OtroEjemplo:
@medianotscreenand(color),printand(color)
Esevaluadodelasiguienteforma:
@media(not(screenand(color))),printand(color)
only
Eloperadoronlyprevienequenavegadoresantiguosquenosoportanqueriesconfuncionesapliquenlos
estilosasignados:
https://developer.mozilla.org/es/docs/CSS/Media_queries
3/16
27/7/2015
CSSmediaqueriesCSS|MDN
<linkrel="stylesheet"media="onlyscreenand(color)"href="Ejemplo.css"/>
PseudoBNF(paraaquellosaquieneslesgustanesascosas)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
media_query_list:<media_query>[,<media_query>]*
media_query:[[only|not]?<media_type>[and<expression>]*]
|<expression>[and<expression>]*
expression:(<media_feature>[:<value>]?)
media_type:all|aural|braille|handheld|print|
projection|screen|tty|tv|embossed
media_feature:width|minwidth|maxwidth
|height|minheight|maxheight
|devicewidth|mindevicewidth|maxdevicewidth
|deviceheight|mindeviceheight|maxdeviceheight
|aspectratio|minaspectratio|maxaspectratio
|deviceaspectratio|mindeviceaspectratio|maxdeviceaspectratio
|color|mincolor|maxcolor
|colorindex|mincolorindex|maxcolorindex
|monochrome|minmonochrome|maxmonochrome
|resolution|minresolution|maxresolution
|scan|grid
Losqueriessoninsensiblesalasmaysculasominsculas.Mediaqueriesquecontengantiposde
mediosdesconocidossiempreretornaranfalso.
Nota:Losparntesissonrequeridosalrededordelasexpresiones,noutilizarlosesunerror.
FuncionesMultimedia
Lamayoradelasfuncionesmultimediapuedenserprecedidaspor"min"o"max"paraexpresar
"greaterorequalto"o"lessthanorequalto".Estoeliminalanecesidaddeusarlossmbolos"<"y">"los
cualespodrancausarconflictosconHTMLyXML.Siustedusaunafuncinmultimediasinespecificarle
unvalor,laexpresinretornaraverdaderosielvaloresdiferentedecero.
Nota:Siunafuncinmultimedianoaplicaaldispositivodondeelnavegadorestacorriendo,la
expresinquecontieneesafuncinsiempreretornarafalso.PorEjemplo,cambiarlarelacinde
aspectoenundispositivoauralsiempreresultarafalso.
color
https://developer.mozilla.org/es/docs/CSS/Media_queries
4/16
27/7/2015
CSSmediaqueriesCSS|MDN
Valor:<color>
Medio:visual
Aceptaprefijosmin/max:si
Indicaelnumerodebitsporcomponentedecolordeldispositivodesalida.Sieldispositivonosoporta
colores,estevalores0.
Nota:Sielcomponentedecolortienediferentenumerodebitsporcolor,entonceselvalormas
pequeoesutilizado.PorEjemplo,siunapantallautiliza5bitsparaazulyrojoy6bitsparael
verde,entoncesseutilizan5bitsporcomponentedecolor.Sieldispositivoutilizandicesdecolor
seusaraelmnimovalordebitsporcolorenlatabla.
Ejemplos
Paraaplicarunahojadeestiloatodoslosdispositivosquesoportencolores:
@mediaalland(color){...}
Paraaplicarunahojadeestiloadispositivosconalmenos4bitsporcomponentedecolor:
@mediaalland(mincolor:4){...}
colorindex
Valor:<integer>
Medio:visual
Aceptaprefijosmin/max:si
Indicaelnumerodeentradasenlatabladecoloresparaeldispositivodesalida.
Ejemplos
Paraindicarqueunahojadeestilodebeaplicarseatodoslosdispositivosutilizandondicesdecolor,
ustedpuedehaceresto:
@mediaalland(colorindex){...}
Paraaplicarunahojadeestiloaundispositivoconunndicedealmenos256colores:
https://developer.mozilla.org/es/docs/CSS/Media_queries
5/16
27/7/2015
CSSmediaqueriesCSS|MDN
<linkrel="stylesheet"media="alland(mincolorindex:256)"href="http://foo.bar.com/st
aspectratio
Valor:<ratio>
Medio:visual,tactile
Aceptaprefijosmin/max:si
Describeelaspectodeunazonaamostrareneldispositivodesalida.Estevalorconsisteenenteros
positivosseparadosporunabarra("/").Estorepresentalarazndeaspectodelospixeleshorizontales
(primertermino)alospixelesverticales(segundotermino).
Ejemplo
Losiguienteseleccionaunahojadeestiloespecialparaseraplicadadondelaproporcindeltamaode
lapantalladeldispositivodesalidaesalmenoslamismadeanchoquedealto.
@mediascreenand(minaspectratio:1/1){...}
Esteseleccionaelestilocuandolaproporcindeaspectosea1:1osuperior.Enotraspalabrasesteestilo
soloseraaplicadocuandoelreadevisualizacinseacuadradauhorizontal.
deviceaspectratio
Valor:<ratio>
Medio:visual,tactile
Aceptaprefijosmin/max:si
Describelaproporcindeaspectodeldispositivodesalida.Estevalorconsistededosenterospositivos
separadosporunabarra("/").Esterepresentalaproporcindeaspectodelospixeleshorizontales
(primertermino)alospixelesverticales(segundotermino).
Ejemplo
Losiguienteseleccionaunahojadeestiloespecialparaseraplicadaenpantallaswidescreen.
@mediascreenand(deviceaspectratio:16/9),screenand(deviceaspectratio:16/10)
Esteseleccionaelestilocuandolaproporcindeaspectosea16:9o16:10.
https://developer.mozilla.org/es/docs/CSS/Media_queries
6/16
27/7/2015
CSSmediaqueriesCSS|MDN
deviceheight
Valor:<length>
Medio:visual,tactile
Aceptaprefijosmin/max:si
Describelaalturadeldispositivodesalida(yasealatotalidaddelapantallaopginaynoelreadel
documentoarenderizar).
devicewidth
Valor:<length>
Medio:visual,tactile
Aceptaprefijosmin/max:yes
Describelaanchuradeldispositivodesalida(yasealatotalidaddelapantallaopginaynoelreadel
documentoarenderizar).
Ejemplo
Paraaplicarunahojadeestiloaundocumentocuandoesteseamostradoenunapantalladealmenos
800pxdeancho,ustedpuedeusaresto:
<linkrel="stylesheet"media="screenand(maxdevicewidth:799px)"/>
grid
Valor:<integer>
Medio:all
Aceptaprefijosmin/max:no
Determinacuandoeldispositivodesalidaesundispositivodecuadrculaodemapadebits.Siel
dispositivoestabasadoenunacuadrcula(comounaterminalTTYounapantalladetelfonodesolo
texto),elvalorsera1,delocontrariosera0.
Ejemplo
Paraaplicarunahojadeestiloaundispositivoporttilconunapantallade15caracteresomasestrecha:
@mediahandheldand(grid)and(maxwidth:15em){...}
https://developer.mozilla.org/es/docs/CSS/Media_queries
7/16
27/7/2015
CSSmediaqueriesCSS|MDN
Nota:Launidad"em"tieneunsignificadoespecialparalosdispositivosdecuadrculayaquela
anchuraexactadeuna"em"nopuedeserdeterminada,seasumeun"em"comoelanchodeuna
celdaenlacuadrculayelaltodeunaceldaenlacuadrcula.
height
Valor:<length>
Medio:visual,tactile
Aceptaprefijosmin/max:yes
Lafuncinheightdescribelaalturadelasuperficiearenderizareneldispositivodesalida(comola
alturadeunaventanaolabandejadepapelenunaimpresora).
Nota:CuandoelusuariocambiaeltamaodeunaventanaFirefoxtambincambialashojasde
estiloparautilizarlamasadecuadabasndoseenlosvaloresdewidthyheightdelquery.
monochrome
Valor:<integer>
Medio:visual
Aceptaprefijosmin/max:yes
Indicaelnmerodebitsporpixelenundispositivomonocromtico(escaladegrises).Sieldispositivono
esmonocromticoelvalorsera0.
Ejemplos
Paraaplicarunahojadeestiloatodoslosdispositivosmonocromticos:
@mediaalland(monochrome){...}
Paraaplicarunahojadeestiloaundispositivomonocromticoconalmenos8bitsporpixel:
@mediaalland(minmonochrome:8){...}
orientation
Valor:landscape|portrait
Medio:visual
https://developer.mozilla.org/es/docs/CSS/Media_queries
8/16
27/7/2015
CSSmediaqueriesCSS|MDN
Aceptaprefijosmin/max:no
Indicacuandoeldispositivoestaenmodolandscape(elanchodelapantallaesmayoralalto)omodo
portrait(elaltodelapantallaesmayoralancho).
Ejemplo
Paraaplicarunahojadeestilosoloenorientacinvertical(portrait):
@mediaalland(orientation:portrait){...}
resolution
Valor:<resolution>
Medio:bitmap
Aceptaprefijosmin/max:yes
Indicalaresolucin(densidaddepixeles)deldispositivodesalida.Laresolucinpuedeserespecificada
enpuntosporpulgada(dpi)oenpuntosporcentmetros(dpcm).
Ejemplo
Paraaplicarunahojadeestiloadispositivosconalmenos300dpideresolucin:
@mediaprintand(minresolution:300dpi){...}
Parareemplazarlaviejasintaxis(mindevicepixelratio:2):
@mediascreenand(minresolution:2dppx){...}
scan
Valor:progressive|interlace
Medio:tv
Aceptaprefijosmin/max:no
Describeelprocesodeexploracindetelevisindelosdispositivosdesalida.
Ejemplo
Paraaplicarunahojadeestilosoloatelevisoresdeexploracinprogresiva:
https://developer.mozilla.org/es/docs/CSS/Media_queries
9/16
27/7/2015
CSSmediaqueriesCSS|MDN
@mediatvand(scan:progressive){...}
width
Valor:<length>
Medio:visual,tactile
Aceptaprefijosmin/max:yes
Lafuncinwidthdescribeelanchodelasuperficiearenderizareneldispositivodesalida(comoel
anchodeunaventanadeundocumentooelanchodelabandejadepapelenunaimpresora).
Nota:CuandoelusuariocambiaeltamaodeunaventanaFirefoxtambincambialashojasde
estiloparautilizarlamasadecuadabasndoseenlosvaloresdewidthyheightdelquery.
Ejemplos
Siustedquiereespecificarunahojadeestiloparadispositivosporttilesopantallasconunanchodeal
menos20em,ustedpuedeusarestaquery:
@mediahandheldand(minwidth:20em),screenand(minwidth:20em){...}
Estaqueryespecificaunahojadeestiloparaseraplicadaaunmedioimpresoconunanchomayora8.5
pulgadas:
1
2
<linkrel="stylesheet"media="printand(minwidth:8.5in)"
href="http://foo.com/mystyle.css"/>
Estaqueryespecificaunahojadeestiloparaserutilizadacuandolaventanatieneunanchoentre500y
800pixeles:
@mediascreenand(minwidth:500px)and(maxwidth:800px){...}
Mozillaspecificmediafeatures
MozillaofrecevariasfuncionesespecificasdeGecko.Algunasdeestaspuedenserpropuestascomo
funcinesoficiales.
https://developer.mozilla.org/es/docs/CSS/Media_queries
10/16
27/7/2015
CSSmediaqueriesCSS|MDN
mozimagesinmenus
(Fire f o x 3 . 6 / Th u n d e rb ird 3 . 1 / Fe n n e c 1 . 0 )
Valor:<integer>
Medio:visual
Aceptaprefijosmin/max:no
Sieldispositivoaceptaquehayaimgenesenmens,elvalores1deotromodosera0.Esto
correspondeala:mozsystemmetric(imagesinmenus)CSSpseudoclass.
mozmacgraphitetheme
(Fire f o x 3 . 6 / Th u n d e rb ird 3 . 1 / Fe n n e c 1 . 0 )
Valor:<integer>
Medio:visual
Aceptaprefijosmin/max:no
Sielusuariohaconfiguradosudispositivoparausarlaapariencia"Grafito"enMacOSX,estosera1.Si
elusuarioestausandolaaparienciaazulpordefecto,osinousaMacOSX,estosera0.
Estocorrespondeala:mozsystemmetric(macgraphitetheme)CSSpseudoclass.
mozmaemoclassic
(Fire f o x 3 . 6 / Th u n d e rb ird 3 . 1 / Fe n n e c 1 . 0 )
Valor:<integer>
Medio:visual
Aceptaprefijosmin/max:no
SielusuarioestausandoMaemoconeltemaoriginal,estosera1Siestausandoelnuevo
temaFremantle,sera0.
Estocorrespondeala:mozsystemmetric(maemoclassic)CSSpseudoclass.
mozdevicepixelratio
(Fire f o x 4 / Th u n d e rb ird 3 . 3 / S e a Mo n ke y 2 . 1 )
Valor:<number>
Medio:visual
Aceptaprefijosmin/max:yes
DaelnumerodepixelesdeldispositivoporpixelesdeCSS.
https://developer.mozilla.org/es/docs/CSS/Media_queries
11/16
27/7/2015
CSSmediaqueriesCSS|MDN
Nouseestafuncin.
Encambiouselafuncinresolutionconlaunidaddppx.
mozdevicepixelratiopuedeserusadaparacompatibilidadconFirefox16oanteriorywebkit
devicepixelratioconnavegadoresbasadosenWebKitquenosoportendppx.
Ejemplo:
1
2
3
4
@media(webkitmindevicepixelratio:2),/*NavegadoresbasadosenWebKit*/
(minmozdevicepixelratio:2),/*NavegadoresanterioresaFirefox16*/
(minresolution:2dppx),/*Laformaestandar*/
(minresolution:192dpi)/*compatibilidadcondppx*/
Veaeste articuloCSSWGsobrebuenaspracticasparacompatibilidadenrelacinaresolutiony
dppx.
Nota:EstafuncionmultimediatambienestaimplementadaenWebkitcomowebkitdevice
pixelratio.LosprefijosminimosymaximosdeestafuncionimplementadosporGeckose
llamanasi:minmozdevicepixelratioymaxmozdevicepixelratioylosmismos
prefijosimplementadosporWebkitsellamanasi:webkitmindevicepixelratioywebkit
maxdevicepixelratio.
mozosversion
(Fire f o x 2 5 . 0 / Th u n d e rb ird 2 5 . 0 / S e a Mo n ke y 2 . 2 2 )
Valor:windowsxp|windowsvista|windowswin7|windowswin8
Medio:visual
Aceptaprefijosmin/max:no
Indicaquesistemaoperativoestaenusoactualmente.ActualmentesoloesimplementadoenWindows.
Susposiblesvaloresson:
windowsxp
windowsvista
windowswin7
windowswin8
https://developer.mozilla.org/es/docs/CSS/Media_queries
12/16
27/7/2015
CSSmediaqueriesCSS|MDN
Estosehaceparapermitiralosskinsyaalgunoscdigosfuncionenmejorconelsistemaoperativoenel
queseejecutan.
mozscrollbarendbackward
(Fire f o x 3 . 6 / Th u n d e rb ird 3 . 1 / Fe n n e c 1 . 0 )
Valor:<integer>
Medio:visual
Aceptaprefijosmin/max:no
Elvalorsera1silainterfazdeusuariomuestraunafechainversaalfinaldelabarradedesplazamiento,
delocontrarioelvalorsera0.
Estocorrespondeala:mozsystemmetric(scrollbarendbackward)CSSpseudoclass.
mozscrollbarendforward
(Fire f o x 3 . 6 / Th u n d e rb ird 3 . 1 / Fe n n e c 1 . 0 )
Valor:<integer>
Medio:visual
Aceptaprefijosmin/max:no
Elvalorsera1silainterfazdeusuariomuestraunafechaapuntandohacialaderechaalfinaldelabarra
dedesplazamiento.delocontrarioelvalorsera0.
Estocorrespondeala:mozsystemmetric(scrollbarendforward)CSSpseudoclass.
mozscrollbarstartbackward
(Fire f o x 3 . 6 / Th u n d e rb ird 3 . 1 / Fe n n e c 1 . 0 )
Valor:<integer>
Medio:visual
Aceptaprefijosmin/max:no
Elvalorsera1silainterfazdeusuariomuestraunafechainversaalprincipiodelabarrade
desplazamiento,delocontrarioelvalorsera0.
Estocorrespondeala:mozsystemmetric(scrollbarstartbackward)CSSpseudoclass.
mozscrollbarstartforward
https://developer.mozilla.org/es/docs/CSS/Media_queries
(Fire f o x 3 . 6 / Th u n d e rb ird 3 . 1 / Fe n n e c 1 . 0 )
13/16
27/7/2015
CSSmediaqueriesCSS|MDN
Valor:<integer>
Medio:visual
Aceptaprefijosmin/max:no
Elvalorsera1silainterfazdeusuariomuestraunafechaapuntandohacialaderechaalprincipiodela
barradedesplazamiento,delocontrarioelvalorsera0.
Estocorrespondeala:mozsystemmetric(scrollbarstartforward)CSSpseudoclass.
mozscrollbarthumbproportional
(Fire f o x 3 . 6 / Th u n d e rb ird 3 . 1 / Fe n n e c 1 . 0 )
Valor:<integer>
Medio:visual
Aceptaprefijosmin/max:no
Elvalorsera1silainterfazdeusuariomuestralaminiaturadelabarradedesplazamientodeforma
proporcional(basadoenelporcentajedeldocumentoqueesvisible),delocontrarioelvalorsera0.
Estocorrespondeala:mozsystemmetric(scrollbarthumbproportional)CSSpseudoclass.
moztouchenabled
(Fire f o x 3 . 6 / Th u n d e rb ird 3 . 1 / Fe n n e c 1 . 0 )
Valor:<integer>
Medio:visual
Aceptaprefijosmin/max:no
Elvalorsera1sieldispositivosoportaeventostctiles(unapantallatctil),delocontrarioelvalorsera0.
Estocorrespondeala:mozsystemmetric(touchenabled)CSSpseudoclass.
Ejemplo
Ustedpuedeusarestopararenderizarsusbotonesunpocomasgrandes,PorEjemplo,sielusuariose
encuentraenunapantallatctil,estoharlosbotonesmasfcilesdeusarconlosdedos.
mozwindowsclassic
(Fire f o x 3 . 6 / Th u n d e rb ird 3 . 1 / Fe n n e c 1 . 0 )
Valor:<integer>
Medio:visual
Aceptaprefijosmin/max:no
https://developer.mozilla.org/es/docs/CSS/Media_queries
14/16
27/7/2015
CSSmediaqueriesCSS|MDN
Elvalorsera1sielusuarioutilizaunwindowssintemasvisuales(modoclasico)delocontrarioelvalor
sera0.
Estocorrespondeala:mozsystemmetric(windowsclassic)CSSpseudoclass.
mozwindowscompositor
(Fire f o x 3 . 6 / Th u n d e rb ird 3 . 1 / Fe n n e c 1 . 0 )
Valor:<integer>
Medio:visual
Aceptaprefijosmin/max:no
Elvalorsera1sielusuarioutilizawindowsconelcompositordeventanasDWMdelocontrarioelvalor
sera0.
Estocorrespondeala:mozsystemmetric(windowscompositor)CSSpseudoclass.
mozwindowsdefaulttheme
(Fire f o x 3 . 6 / Th u n d e rb ird 3 . 1 / Fe n n e c 1 . 0 )
Valor:<integer>
Medio:visual
Aceptaprefijosmin/max:no
Elvalorsera1sielusuarioactualmenteestautilizandoalgunosdelostemaspordefectodeWindows
(Luna,Royale,Zune,orAero),delocontrarioelvalorsera0.
Estocorrespondeala:mozsystemmetric(windowsdefaulttheme)CSSpseudoclass.
mozwindowstheme
(Fire f o x 4 / Th u n d e rb ird 3 . 3 / S e a Mo n ke y 2 . 1 )
Valor:aero|lunablue|lunaolive|lunasilver|royale|generic|zune
Medio:visual
Aceptaprefijosmin/max:no
IndicacualtemadeWindowsestaenusoactualmente.SolodisponibleparaWindows.Susposibles
valoresson:
aero
lunablue
lunaolive
https://developer.mozilla.org/es/docs/CSS/Media_queries
15/16
27/7/2015
CSSmediaqueriesCSS|MDN
lunasilver
royale
generic
zune
Estosehaceparapermitiralosskinsyaalgunoscdigosfuncionenmejorconeltemautilizadoporel
sistemaoperativoenelqueseejecutan.
CompatibilidadconNavegadores
Desktop
Mobile
Funcin
Chrome Firefox(Gecko)
Internet
Explorer
Opera Safari
soporte
bsico
21
3.5(1.9.1)
9.0
rejilla
Notsupported(gridmediatypeisnot
supported)
resolucin
29
3.5(1.9.1)supports<integer>values
8.0(8.0)supports<number>values,asperthe
spec.
exploracin
Notsupported(tvmediatypeisnotsupported)
Veatambin
EspecificacinCSS3mediaquery
TiposdeMedios
Usandomediaqueriesdesdecdigo
https://developer.mozilla.org/es/docs/CSS/Media_queries
16/16