diff options
Diffstat (limited to 'files/fr/learn/css/css_layout/media_queries/index.html')
| -rw-r--r-- | files/fr/learn/css/css_layout/media_queries/index.html | 100 |
1 files changed, 50 insertions, 50 deletions
diff --git a/files/fr/learn/css/css_layout/media_queries/index.html b/files/fr/learn/css/css_layout/media_queries/index.html index 552d1982df..f629d17eb3 100644 --- a/files/fr/learn/css/css_layout/media_queries/index.html +++ b/files/fr/learn/css/css_layout/media_queries/index.html @@ -8,11 +8,11 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>The <strong>CSS Media Query</strong> gives you a way to apply CSS only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels". Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. In this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple design might be made responsive.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prerequisites:</th> - <td>HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a> and <a href="/en-US/docs/Learn/CSS/Building_blocks">CSS building blocks</a>.)</td> + <td>HTML basics (study <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/fr/docs/Learn/CSS/First_steps">CSS first steps</a> and <a href="/fr/docs/Learn/CSS/Building_blocks">CSS building blocks</a>.)</td> </tr> <tr> <th scope="row">Objective:</th> @@ -50,22 +50,22 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>The following media query will only set the body to 12pt if the page is printed. It will not apply when the page is loaded in a browser.</p> -<pre class="brush: css"><code>@media print { +<pre class="brush: css">@media print { body { font-size: 12pt; } -}</code></pre> +}</pre> -<div class="blockIndicator note"> -<p><strong>Note</strong>: the media type here is different from the so-called {{glossary("MIME type")}}.</p> +<div class="note"> +<p><strong>Note :</strong> the media type here is different from the so-called {{glossary("MIME type")}}.</p> </div> -<div class="blockIndicator note"> -<p><strong>Note</strong>: there were a number of other media types defined in the Level 3 Media Queries specification; these have been deprecated and should be avoided.</p> +<div class="note"> +<p><strong>Note :</strong> there were a number of other media types defined in the Level 3 Media Queries specification; these have been deprecated and should be avoided.</p> </div> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Media types are optional; if you do not indicate a media type in your media query then the media query will default to being for all media types.</p> +<div class="note"> +<p><strong>Note :</strong> Media types are optional; if you do not indicate a media type in your media query then the media query will default to being for all media types.</p> </div> <h3 id="Media_feature_rules">Media feature rules</h3> @@ -78,37 +78,37 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>These features are used to create layouts that respond to different screen sizes. For example, to change the body text color to red if the viewport is exactly 600 pixels, you would use the following media query.</p> -<pre class="brush: css"><code>@media screen and (width: 600px) { +<pre class="brush: css">@media screen and (width: 600px) { body { color: red; } -}</code></pre> +}</pre> <p><a href="https://mdn.github.io/css-examples/learn/media-queries/width.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/width.html">view the source</a>.</p> <p>The <code>width</code> (and <code>height</code>) media features can be used as ranges, and therefore be prefixed with <code>min-</code> or <code>max-</code> to indicate that the given value is a minimum, or a maximum. For example, to make the color blue if the viewport is narrower than 400 pixels, use <code>max-width</code>:</p> -<pre class="brush: css"><code>@media screen and (max-width: 400px) { +<pre class="brush: css">@media screen and (max-width: 400px) { body { color: blue; } -}</code></pre> +}</pre> <p><a href="https://mdn.github.io/css-examples/learn/media-queries/max-width.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/max-width.html">view the source</a>.</p> <p>In practice, using minimum or maximum values is much more useful for responsive design so you will rarely see <code>width</code> or <code>height</code> used alone.</p> -<p>There are a number of other media features that you can test for, although some of the newer features introduced in Level 4 and 5 of the media queries specification have limited browser support. Each feature is documented on MDN along with browser support information, and you can find a full list at <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">Using Media Queries: Media Features</a>.</p> +<p>There are a number of other media features that you can test for, although some of the newer features introduced in Level 4 and 5 of the media queries specification have limited browser support. Each feature is documented on MDN along with browser support information, and you can find a full list at <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">Using Media Queries: Media Features</a>.</p> <h4 id="Orientation">Orientation</h4> <p>One well-supported media feature is <code>orientation</code>, which allows us to test for portrait or landscape mode. To change the body text color if the device is in landscape orientation, use the following media query.</p> -<pre class="brush: css"><code>@media (orientation: landscape) { +<pre class="brush: css">@media (orientation: landscape) { body { color: rebeccapurple; } -}</code></pre> +}</pre> <p><a href="https://mdn.github.io/css-examples/learn/media-queries/orientation.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/orientation.html">view the source</a>.</p> @@ -118,11 +118,11 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>As part of the Level 4 specification, the <code>hover</code> media feature was introduced. This feature means you can test if the user has the ability to hover over an element, which essentially means they are using some kind of pointing device; touchscreen and keyboard navigation does not hover.</p> -<pre class="brush: css"><code>@media (hover: hover) { +<pre class="brush: css">@media (hover: hover) { body { color: rebeccapurple; } -}</code></pre> +}</pre> <p><a href="https://mdn.github.io/css-examples/learn/media-queries/hover.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/hover.html">view the source</a>.</p> @@ -140,11 +140,11 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>To combine media features you can use <code>and</code> in much the same way as we have used <code>and</code> above to combine a media type and feature. For example, we might want to test for a <code>min-width</code> and <code>orientation</code>. The body text will only be blue if the viewport is at least 400 pixels wide and the device is in landscape mode.</p> -<pre class="brush: css"><code>@media screen and (min-width: 400px) and (orientation: landscape) { +<pre class="brush: css">@media screen and (min-width: 400px) and (orientation: landscape) { body { color: blue; } -}</code></pre> +}</pre> <p><a href="https://mdn.github.io/css-examples/learn/media-queries/and.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/and.html">view the source</a>.</p> @@ -152,11 +152,11 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>If you have a set of queries, any of which could match, then you can comma separate these queries. In the below example the text will be blue if the viewport is at least 400 pixels wide OR the device is in landscape orientation. If either of these things are true the query matches.</p> -<pre class="brush: css"><code>@media screen and (min-width: 400px), screen and (orientation: landscape) { +<pre class="brush: css">@media screen and (min-width: 400px), screen and (orientation: landscape) { body { color: blue; } -}</code></pre> +}</pre> <p><a href="https://mdn.github.io/css-examples/learn/media-queries/or.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/or.html">view the source</a>.</p> @@ -164,11 +164,11 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>You can negate an entire media query by using the <code>not</code> operator. This reverses the meaning of the entire media query. Therefore in this next example the text will only be blue if the orientation is portrait.</p> -<pre class="brush: css"><code>@media not all and (orientation: landscape) { +<pre class="brush: css">@media not all and (orientation: landscape) { body { color: blue; } -}</code></pre> +}</pre> <p><a href="https://mdn.github.io/css-examples/learn/media-queries/not.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/not.html">view the source</a>.</p> @@ -178,9 +178,9 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>There are now far too many devices, with a huge variety of sizes, to make that feasible. This means that instead of targetting specific sizes for all designs, a better approach is to change the design at the size where the content starts to break in some way. Perhaps the line lengths become far too long, or a boxed out sidebar gets squashed and hard to read. That's the point at which you want to use a media query to change the design to a better one for the space you have available. This approach means that it doesn't matter what the exact dimensions are of the device being used, every range is catered for. The points at which a media query is introduced are known as <strong>breakpoints</strong>.</p> -<p>The <a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive Design Mode</a> in Firefox DevTools is very useful for working out where these breakpoints should go. You can easily make the viewport smaller and larger to see where the content would be improved by adding a media query and tweaking the design.</p> +<p>The <a href="/fr/docs/Tools/Responsive_Design_Mode">Responsive Design Mode</a> in Firefox DevTools is very useful for working out where these breakpoints should go. You can easily make the viewport smaller and larger to see where the content would be improved by adding a media query and tweaking the design.</p> -<p><img alt="A screenshot of a layout in a mobile view in Firefox DevTools." src="https://mdn.mozillademos.org/files/16867/rwd-mode.png" style="height: 917px; width: 1443px;"></p> +<p><img alt="A screenshot of a layout in a mobile view in Firefox DevTools." src="rwd-mode.png"></p> <h2 id="Active_learning_mobile_first_responsive_design">Active learning: mobile first responsive design</h2> @@ -194,7 +194,7 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>Our starting point is an HTML document with some CSS applied to add background colors to the various parts of the layout.</p> -<pre class="brush: css"><code>* { +<pre class="brush: css">* { box-sizing: border-box; } @@ -244,11 +244,11 @@ nav a:hover { article { margin-bottom: 1em; } -</code></pre> +</pre> <p>We've made no layout changes, however the source of the document is ordered in a way that makes the content readable. This is an important first step and one which ensures that if the content were to be read out by a screen reader, it would be understandable.</p> -<pre class="brush: html"><code><body> +<pre class="brush: html"><body> <div class="wrapper"> <header> <nav> @@ -288,7 +288,7 @@ article { <footer><p>&copy;2019</p></footer> </div> </body> -</code></pre> +</pre> <p>This simple layout also works well on mobile. If we view the layout in Responsive Design Mode in DevTools we can see that it works pretty well as a straightforward mobile view of the site.</p> @@ -300,7 +300,7 @@ article { <p><strong>Add the below code into the bottom of your step1.html CSS.</strong></p> -<pre class="brush: css"><code>@media screen and (min-width: 40em) { +<pre class="brush: css">@media screen and (min-width: 40em) { article { display: grid; grid-template-columns: 3fr 1fr; @@ -315,7 +315,7 @@ article { flex: 1; } } -</code></pre> +</pre> <p>This CSS gives us a two-column layout inside the article, of the article content and related information in the aside element. We have also used flexbox to put the navigation into a row.</p> @@ -353,7 +353,7 @@ article { <p>This could be achieved using the following:</p> -<pre class="brush: html"><code><ul class="grid"> +<pre class="brush: html"><ul class="grid"> <li> <h2>Card 1</h2> <p>...</p> @@ -374,9 +374,9 @@ article { <h2>Card 5</h2> <p>...</p> </li> -</ul></code></pre> +</ul></pre> -<pre class="brush: css"><code>.grid { +<pre class="brush: css">.grid { list-style: none; margin: 0; padding: 0; @@ -388,7 +388,7 @@ article { .grid li { border: 1px solid #666; padding: 10px; -}</code></pre> +}</pre> <p><a href="https://mdn.github.io/css-examples/learn/media-queries/grid.html">Open the grid layout example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/grid.html">view the source</a>.</p> @@ -396,7 +396,7 @@ article { <h2 id="Test_your_skills!">Test your skills!</h2> -<p>You've reached the end of this article, but can you remember the most important information? You can find a test to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/CSS/CSS_layout/rwd_skills">Test your skills: Responsive Web Design</a>.</p> +<p>You've reached the end of this article, but can you remember the most important information? You can find a test to verify that you've retained this information before you move on — see <a href="/fr/docs/Learn/CSS/CSS_layout/rwd_skills">Test your skills: Responsive Web Design</a>.</p> <h2 id="Summary">Summary</h2> @@ -411,16 +411,16 @@ article { <h2 id="In_this_module">In this module</h2> <ul> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li> </ul> |