mozilla

Compare Revisions

Testing media queries

Change Revisions

Revision 37448:

Revision 37448 by Caesarsgrunt on

Revision 315967:

Revision 315967 by ethertank on

Title:
Using media queries from code
Using media queries from code
Slug:
DOM/Using_media_queries_from_code
DOM/Using_media_queries_from_code
Tags:
css, DOM, NeedsTechnicalReview, NeedsBrowserCompatibility, "Media queries", NeedsMobileBrowserCompatibility
"NeedsMobileBrowserCompatibility", "NeedsBrowserCompatibility", "css", "Media queries", "DOM", "NeedsTechnicalReview"
Content:

Revision 37448
Revision 315967
n8      The DOM provides features that make it possible to tesn8      The DOM provides features that make it possible to test the
>t the results of a media query programmatically. This is done usi> results of a media query programmatically. This is done using th
>ng the {{ domxref("MediaQueryList") }} interface and its methods >e {{domxref("MediaQueryList") }} interface and its methods and pr
>and properties. Once you've created a {{ domxref("MediaQueryList">operties. Once you've created a {{domxref("MediaQueryList") }} ob
>) }} object, you can check the result of the query or, alter>ject, you can check the result of the query or, alternatively, re
>natively, receive notifications automatically when the result cha>ceive notifications automatically when the result changes.
>nges. 
n13    <h2 id="Creating_a_media_query_list">n13    <h2 id="Creating_a_media_query_list" name="Creating_a_media_q
 >uery_list">
n17      Before you can evaluate the results of a query, you need ton17      Before you can evaluate the results of a query, you need to
> create the {{ domxref("MediaQueryList") }} object representing t> create the {{domxref("MediaQueryList") }} object representing th
>he media query. To do this, use the {{ domxref("window.matchMedia>e media query. To do this, use the {{domxref("window.matchMedia")
>") }}&nbsp;method.> }} method.
n25    <h2 id="Checking_the_result_of_a_query">n25    <h2 id="Checking_the_result_of_a_query" name="Checking_the_re
 >sult_of_a_query">
n38    <h2 id="Receiving_query_notifications">n38    <h2 id="Receiving_query_notifications" name="Receiving_query_
 >notifications">
n42      If you need to be aware of changes to the evaluated result n42      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>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 > a listener than to poll the query's result. To do this, you can 
>call the <code>addListener()</code>&nbsp;method on the {{ domxref>call the <code>addListener()</code> method on the {{domxref("Medi
>("MediaQueryList") }}&nbsp;object, specifying an observer that im>aQueryList") }} object, specifying an observer that implements th
>plements the {{ domxref("MediaQueryListListener") }}&nbsp;interfa>e {{domxref("MediaQueryListListener") }} interface:
>ce: 
n53      The <code>handleOrientationChange()</code>&nbsp;method we in53      The <code>handleOrientationChange()</code> method we implem
>mplement then would look at the result of the query and handle wh>ent then would look at the result of the query and handle whateve
>atever we need to do on an orientation change:>r we need to do on an orientation change:
n64    <h2 id="Ending_query_notifications">n64    <h2 id="Ending_query_notifications" name="Ending_query_notifi
 >cations">
n68      When you no longer need to receive notifications about chann68      When you no longer need to receive notifications about chan
>ges to the value of your media query, you can simply call <code>r>ges to the value of your media query, you can simply call <code>r
>emoveListener()</code>&nbsp;on the {{ domxref("MediaQueryList") }>emoveListener()</code> on the {{domxref("MediaQueryList") }}:
>}: 
n73    <h2 id="Browser_compatibility">n73    <h2 id="Browser_compatibility" name="Browser_compatibility">
n77      {{ CompatibilityTable() }}n77      {{CompatibilityTable}}
n110              {{ CompatGeckoDesktop("6.0") }}n110              {{CompatGeckoDesktop("6.0") }}
n113              {{ 10 }}n113              10
n116              {{ CompatUnknown() }}n116              {{CompatUnknown}}
n119              {{ 5.1 }}n119              5.1
n153              {{ CompatUnknown() }}n153              {{CompatUnknown}}
n156              {{ CompatUnknown() }}n156              {{CompatUnknown}}
n159              {{ CompatUnknown() }}n159              {{CompatUnknown}}
n162              {{ CompatUnknown() }}n162              {{CompatUnknown}}
n165              {{ 5 }}n165              5
n171    <h2 id="See_also">n171    <h2 id="See_also" name="See_also">
n176        <a href="/en/CSS/Media_queries" title="En/CSS/Media querin176        <a href="/en-US/docs/CSS/Media_queries" title="CSS/Media 
>es">Media queries</a>>queries">Media queries</a>
n178      <li>{{ domxref("window.matchMedia()") }}n178      <li>{{domxref("window.matchMedia()") }}
n180      <li>{{ domxref("MediaQueryList") }}n180      <li>{{domxref("MediaQueryList") }}
n182      <li>{{ domxref("MediaQueryListListener") }}n182      <li>{{domxref("MediaQueryListListener") }}
t185    <p>t
186      {{ languages( { "ja": "ja/CSS/Using_media_queries_from_code
>"} ) }} 
187    </p>

Back to History