From a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:46:50 +0100 Subject: unslug es: move --- .../guide/css/probando_media_queries/index.html | 93 ---------------------- 1 file changed, 93 deletions(-) delete mode 100644 files/es/web/guide/css/probando_media_queries/index.html (limited to 'files/es/web/guide/css') diff --git a/files/es/web/guide/css/probando_media_queries/index.html b/files/es/web/guide/css/probando_media_queries/index.html deleted file mode 100644 index dac4330054..0000000000 --- a/files/es/web/guide/css/probando_media_queries/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Probando media queries -slug: Web/Guide/CSS/probando_media_queries -translation_of: Web/CSS/Media_Queries/Testing_media_queries ---- -

{{SeeCompatTable}}

-

El DOM proporciona características que hacen posible probar los resultados de un media query estructuradamente. Esto es hecho usando la interfaz {{domxref("MediaQueryList") }} y sus métodos y propiedades. Una vez que hayas creado el objeto {{domxref("MediaQueryList") }}, puedes revisar el resultado del query o, como alternativa, recibir notificaciones automáticamente cuando el resultado cambie.

-

Creando una media query list

-

Before you can evaluate the results of a query, you need to create the {{domxref("MediaQueryList") }} object representing the media query. To do this, use the {{domxref("window.matchMedia") }} method.

-

For example, if you want to set up a query list that determines whether the device is in landscape or portrait orientation, you can do so like this:

-
var mql = window.matchMedia("(orientation: portrait)");
-
-

Revisando el resultado de un query

-

Once your media query list has been created, you can check the result of the query by looking at the value of its matches property, which reflects the result of the query:

-
if (mql.matches) {
-  /* The device is currently in portrait orientation */
-} else {
-  /* The device is currently in landscape orientation */
-}
-
-

Recibiendo notificaciones query

-

If you need to be aware of changes to the evaluated result of the query on an ongoing basis, it's more efficient to register a listener than to poll the query's result. To do this, you can call the addListener() method on the {{domxref("MediaQueryList") }} object, specifying an observer that implements the {{domxref("MediaQueryListListener") }} interface:

-
var mql = window.matchMedia("(orientation: portrait)");
-mql.addListener(handleOrientationChange);
-handleOrientationChange(mql);
-
-

This code creates the orientation testing media query list, mql, then adds a listener to it. Note that after adding the listener, we actually invoke the listener directly once. This lets our listener perform initial adjustments based on the current device orientation (otherwise, if our code assumes the device is in portrait mode but it's actually in landscape mode at startup, we could have inconsistencies).

-

The handleOrientationChange() method we implement then would look at the result of the query and handle whatever we need to do on an orientation change:

-
function handleOrientationChange(mql) {
-  if (mql.matches) {
-    /* The device is currently in portrait orientation */
-  } else {
-    /* The device is currently in landscape orientation */
-  }
-}
-
-

Terminando con las notificaciones query 

-

Cuando ya no vayas a necesitar recibir las notificaciones sobre los cambios de valro de tu media query, simplemente llama al removeListener() en el {{domxref("MediaQueryList") }}:

-
mql.removeListener(handleOrientationChange);
-
-

Compatibilidad con los navegadores

-

{{CompatibilityTable}}

-
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico9{{CompatGeckoDesktop("6.0") }}1012.15.1
-
-
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico3.0{{CompatUnknown}}1012.15
-
-

Ver también

- -- cgit v1.2.3-54-g00ecf