Requêtes multimédias pour une mise en page réactive CSS

Dans les projets réels, vous rencontrerez toujours le problème de la mise en page réactive. Si vous n'avez pas utilisé de framework d'interface utilisateur réactif, vous utiliserez généralement des requêtes multimédias pour implémenter une mise en page réactive. je le rencontre si souvent, je pense qu'il est nécessaire de le résumer un peu.

La première chose que nous devons comprendre est que lors de l'utilisation de requêtes multimédias, lorsque la taille du navigateur est réinitialisée, la page sera restituée en fonction de la largeur et de la hauteur du navigateur.

1. À propos de la méta

Avant d'utiliser les requêtes multimédias, vous devez d'abord utiliser le paramètre comprenons brièvement Parlons de la balise

Cette balise est généralement placée à l'intérieur de la balise head et est utilisée pour fournir des méta-informations (méta-informations) sur un élément HTML, telles que la description, les mots-clés pour les moteurs de recherche et la fréquence d'actualisation.

Les paramètres des requêtes multimédias sont les suivants :

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Description du paramètre :

1 L'attribut name fournit le nom dans la paire nom/valeur. name="viewport" signifie le réglage de la fenêtre, en plus de la fenêtre.

2. L'attribut content fournit la valeur dans la paire nom/valeur. La valeur peut être n'importe quelle chaîne valide, et le contenu est basé sur le contenu. Il doit toujours être utilisé avec l'attribut http-equiv ou name. leur fournir une définition des valeurs qui y sont associées. Description de la valeur du contenu :

width = device-width : la largeur est égale à la largeur de l'appareil actuel ;

initial-scale : mise à l'échelle initiale (le paramètre par défaut est 1,0 ); 🎜 > échelle minimale : le rapport minimum sur lequel l'utilisateur est autorisé à zoomer (le paramètre par défaut est 1,0) ;

échelle maximale : le rapport maximum sur lequel l'utilisateur est autorisé à zoomer (le paramètre par défaut est 1,0) ; 1.0 );

user -scalable : indique si l'utilisateur peut zoomer manuellement (la valeur par défaut est non, car nous ne voulons pas que les utilisateurs effectuent un zoom avant et arrière sur la page).

Pour une compréhension plus approfondie de , veuillez vous référer à :

http://www.w3school.com.cn/tags/tag_meta.asp

2. Méthode d'implémentation de la requête multimédia

1. Déterminez la taille de l'appareil directement dans le lien, puis référencez différents fichiers CSS externes. Par exemple :

<link type="text/css" href="media_1.css" media="screen and (min-width: px)">

Lorsque l'écran est plus grand que 400px, le fichier de style CSS externe media_1.css est référencé.

2. Lors de la définition du style CSS, définissez @media directement après. Par exemple :

.div1{
    width: 400px;
    height: 400px;
}
/*当屏幕大于1440px的彩色屏幕样式*/
@media screen and (min-width: 1440px){
    .div1{
        width: 800px;
        height:800px;
    }
}

Il s'agit d'une requête multimédia implémentée à l'aide de CSS3. En fait, la requête multimédia est essentiellement un remplacement de style.

3. Requête multimédia CSS3

1. Syntaxe de base

@media  媒体类型  关键字 and (媒体功能) {
        /* CSS 样式 */
    }

2 Mots-clés

uniquement : spécifiez un type de média spécifique que vous pouvez utiliser pour exclure. navigateurs qui ne prennent pas en charge les requêtes multimédias.

non : exclut un type de média spécifié.

L'utilisation de mots-clés est souvent utilisée pour décrire les appareils qui ne prennent pas en charge les fonctionnalités multimédias mais prennent en charge les types de médias

3 Type de média

Le type de média décrit les catégories générales d'appareils, les types de médias sont facultatifs et le type all sera implicitement utilisé à moins que les mots-clés not ou only ne soient utilisés.

Tous les navigateurs prennent en charge les attributs multimédias avec les valeurs "screen", "print" et "all".

值	描述
all	用于所有多媒体类型设备
print	用于打印机
screen	用于电脑屏幕，平板，智能手机等。
speech	用于屏幕阅读器

4. Fonctions multimédias courantes

Voici quelques-unes des fonctions multimédias qui peuvent être légèrement plus couramment utilisées :

hauteur définit la hauteur de la zone visible de ​​la page dans le périphérique de sortie.

width définit la largeur de la zone visible de la page dans le périphérique de sortie.

max-height définit la hauteur maximale de la zone visible de la page dans le périphérique de sortie.

max-width définit la largeur maximale de la zone visible de la page dans le périphérique de sortie.

min-height définit la hauteur minimale de la zone visible de la page dans le périphérique de sortie.

min-width définit la largeur minimale de la zone visible de la page dans le périphérique de sortie.

device-height définit la hauteur visible de l'écran du périphérique de sortie.

device-width définit la largeur visible de l'écran du périphérique de sortie.

max-device-height définit la hauteur maximale visible sur l'écran du périphérique de sortie.

max-device-width définit la largeur visible maximale de l'écran du périphérique de sortie.

orientation détecte si l'appareil est actuellement en orientation paysage ou portrait.

4. Pour les paramètres de taille courants réels

Ce qui suit répertorie uniquement certaines tailles d'écran courantes, mais les paramètres supérieurs à, inférieurs à et égaux à sont également implémentés.

    /* 屏幕尺寸大于960px时（普通彩色屏幕） */
    @media only screen and (min-width:960px){ }
    /* 屏幕尺寸小于1440px时 */
    @media only screen and (max-width:1440px){ }
    /* 屏幕尺寸大于960px而小于1920px */
    @media only screen  (min-width: 960px) and (max-width: 1920px){ }
    /* 屏幕大于2000px时（MAC) */
    @media only screen and (min-width:2000px){ }
    /*  当设备可视宽度小于480px (iphone)*/
    @media only screen and (max-device-width:480px){ }
    /* 当设备可视宽度等于768px时 (iPad) */
    @media only screen and (device-width:768px){ }
    /* 屏幕尺寸大于481px而小于1024px (iPad 竖屏) */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) { }
    /* 屏幕尺寸大于481px而小于1024px (iPad横屏) */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { }

Remarque : en raison du problème de couverture de style de CSS, lors de la configuration réelle, si le même élément doit être défini sur plusieurs tailles différentes, vous devez faire attention au problème d'ordre, tel que : min- En ce qui concerne la largeur, placez les petits en haut et les grands en bas. De même, si vous utilisez max-width, alors les grands sont en haut et les petits en bas.

Tutoriel recommandé : "

Tutoriel CSS

"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!