Comment utiliser le composant jumbotron Bootstrap et le composant page-header.
Media Queries et Responsive Web Design
Queries média vous permettent de personnaliser la présentation de vos pages web dans une plage spécifique d'appareils comme les téléphones mobiles, tablettes, ordinateurs de bureau, etc. sans aucune modification de balises.
C'est-à-dire que vous écrivez un code générale pour votre document, Mais que le contenu sera afficher en totalité pour certains appareils et ne sera pas affiché que partiellement pour autre appareils.
Donc une requête sera composée d'un type de média et zéro ou plusieurs expressions qui correspondent au type et conditions d'une fonctionnalité de média particulier comme par exemple la largeur ou la résolution d’écran.
Étant donné que la requête est une expression logique, qu'elle peut être résolu à true ou false. Le résultat de la requête sera vrai si le type de média spécifiés dans le queries média correspond au type de périphérique, le code est affiché sur le document et toutes les expressions de la Queries média sont réalisées.
Lorsqu'une requête est vraie, la feuille de style connexe ou les règles de style sont appliquées pour le périphérique cible.
Exemples : Vous pourriez avoir un ensemble de règles de style pour les écrans d'ordinateur, un autre ensemble pour les imprimantes, un pour les appareils portables, un pour les dispositifs de type télévision et ainsi de suite.
Les Queries médias peuvent être utilisées pour vérifier beaucoup de choses, telles que :
La largeur et La hauteur de la fenêtre d'affichage
La largeur et hauteur de l'appareil
L’orientation (les tablette et téléphone en mode portrait ou paysage) ?
La résolution
L’utilisation des Queries média est une technique pour fournir une feuille de style adaptée aux différents type d’appareils( tablettes, iPhone et Androids. ..).
Appui de navigateur de Queries media
Les numéros de la table spécifie la première version du navigateur qui pend entièrement en charge la règle @media.
| Propriété | Navigateur |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Syntaxe de Queries media
@media not|only mediatype and (expressions)
{
CSS-Code;
}
Le résultat de la requête est true si le type de média spécifié correspond au type de périphérique le document est affiché avec toutes les expressions de la querie médias. Lorsqu'une requête est vraie, la feuille de style correspondante ou les règles de style sont appliquées, en suivant les règles normales en cascade.
Si vous utilisez les opérateurs not ou only, le type de média est facultatif et le type all est implicite.
Vous pouvez aussi avoir des feuilles de style différentes pour différents médias :
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
Expressions est une expression logique qui définie l’appareil.
Exemples simples de la requête de support pour les périphériques standards.
Exemple :
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple de CSS Media Queries</title>
<style type="text/css">
/* Smartphones (portrait et paysage) */
@media screen and (min-width: 320px) and (max-width: 480px){
body{
background: #7ce7e1;
}
}
/* Smartphones (portrait) */
@media screen and (max-width: 320px){
body{
background: #fee120;
}
}
/* Smartphones (paysage) */
@media screen and (min-width: 321px){
body{
background: #9ddfbb;
}
}
/* tablettes, iPads (portrait et paysage) */
@media screen and (min-width: 768px) and (max-width: 1024px){
body{
background: #ffb497;
}
}
/* tablettes, iPads (portrait) */
@media screen and (min-width: 768px){
body{
background: #fae68f;
}
}
/* tablettes, iPads (paysage) */
@media screen and (min-width: 1024px){
body{
background: #dfb3ff;
}
}
/* Ordinateurs de bureau et ordinateurs portables */
@media screen and (min-width: 1224px){
body{
background: #ffff9d;
}
}
/* Ecrans large (tv...) */
@media screen and (min-width: 1824px){
body{
background: #fdc0cb;
}
}
</style>
</head>
<body>
<h1>CSS Media Queries</h1>
<p>Background de couleur différents suivant le type de
appareil de sortie.</p>
<p><strong>Astuce:</strong> Vous pouvez voir
l'effet de ce media query en l’ouvrant dans différents appareils ou en
redimensionnant la fenêtre dans votre PC.</p>
</body>
</html>
Autre exemple : Changer la largeur de la colonne selon la taille de l'écran
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title> Changer la largeur en utilisant CSS Media
Queries</title>
<style type="text/css">
.contenant {
margin: auto;
background: #ccc;
box-sizing: border-box;
}
/* Smartphones (portrait et paysage) */
@media screen and (max-width: 767px){
.contenant {
width: 100%;
padding: 5px;
}
}
/* Tablettes et iPads (portrait et paysage) */
@media screen and (min-width: 768px) and (max-width: 1023px){
.contenant {
width: 750px;
padding: 5px 10px;
}
}
/* Ordinateurs de bureau et ordinateurs portables à faible résolution
*/
@media screen and (min-width: 1024px) {
.contenant {
width: 980px;
padding: 5px 15px;
}
}
/* Ordinateurs de bureau et ordinateurs portables à haute résolution
*/
@media screen and (min-width: 1280px) {
.contenant {
width: 1200px;
padding: 5px 20px;
}
}
</style>
</head>
<body>
<div class="contenant">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus
dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante.
Vestibulum id metus ac nisl bibendum scelerisque non non purus.
Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit
amet elementum vestibulum. Vivamus fermentum in arcu in aliquam.
Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at
bibendum eu, tristique eget risus. Integer aliquet quam ut elit
suscipit, id interdum neque porttitor. Integer faucibus
ligula.</p>
<p>Quis quam ut magna consequat
faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus
dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse
potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra.
Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi.
Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas
mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et
diam tristique, accumsan nunc eu, hendrerit tellus.</p>
</div>
</body>
</html>
Par Gerywa 21 fevrier 2016