requêtes multimédias en CSS3

Les requêtes multimédias sont principalement utilisées dans les pages Web réactives.

1. Paramètres d'initialisation :

Dans le fichier HTML, insérez une phrase dans la balise en haut de la page Web :

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

Cette phrase La clé est de définir un paramètre d'initialisation pour la page Web réactive, qui comprend principalement :

name="viewport" : marque le périphérique d'affichage comme fenêtre d'affichage ;

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

initial-scale : le rapport de mise à l'échelle initial (le paramètre par défaut est 1,0
minimum-scale : 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) ; si l'utilisateur peut zoomer manuellement (le paramètre par défaut est non, car nous ne voulons pas que les utilisateurs effectuent un zoom avant et arrière sur la page).

2. Résolvez le problème de compatibilité du navigateur IE :

Parce que le navigateur IE (IE8) ne prend pas en charge les médias en HTML5 et CSS3, chargez donc le JS. fichier utilisé pour résoudre le problème de compatibilité du navigateur IE :

<!--[if lt IE 9]>

	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

	<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

<![endif]-->

Pointé par l'attribut src dans les deux balises <script></script> L'adresse est un fichier à une adresse fixe, qui peut être directement référencé hors site sans téléchargement vers une référence locale.

3. Réglez le mode de rendu d'IE au maximum :

De nos jours, de nombreux navigateurs IE ont été mis à niveau vers IE9 ou supérieur. À ce moment-là, de nombreuses choses étranges se produiront, par exemple. , il s'agit désormais du navigateur IE9, mais le mode document du navigateur est IE8 Afin d'éviter cette situation, nous avons besoin du code suivant pour que le mode document d'IE soit toujours à jour :

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Bien sûr, il existe une manière d'écrire plus puissante :

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

Un chrome=1 est ajouté après ce code, ce qui est dû à Google Chrome Frame (Google Embedded Browser Framework (GCF), si l'ordinateur de l'utilisateur installe ce plug-in Chrome, le navigateur IE de l'ordinateur peut éviter les facteurs de version et utiliser le moteur Webkit et le moteur V8 pour la composition et le calcul. Bien entendu, si l'utilisateur n'installe pas ce plug-in, ce code entraînera l'affichage de l'effet par le navigateur IE dans le mode de document le plus élevé.

4. La requête multimédia CSS3 est écrite comme :

@media screen and (max-width: 960px){
	body{
		background: #000;
	}
}

Il s'agit d'une manière standard d'écrire des médias dans un fichier CSS. , cela signifie Pour : Lorsque la page est inférieure à 960 px, le code CSS suivant est exécuté. Le contenu spécifique est ignoré pour le moment.

Pour l'écran dans le code ci-dessus, cela signifie dire à l'appareil d'utiliser des polices avec empattement lors de l'impression de la page et d'utiliser des polices sans empattement lors de l'affichage à l'écran. À l'heure actuelle, de nombreux sites Web omettent directement l'écran, il n'est donc pas nécessaire de prendre en compte le besoin de l'utilisateur d'imprimer des pages Web, il existe donc cette méthode d'écriture :

Conformément au principe de réflexion rigoureuse, je personnellement, je n’utiliserai pas cette méthode d’écriture.

@media (max-width: 960px){
	body{
		background: #000;
	}
}

5. Combinaison de code de corps de requête multimédia CSS3 :

Dans la mise en page Web réactive, la combinaison de code de requête multimédia doit être utilisée en permanence. taille de la largeur de l'écran adaptée et appliquez différents styles CSS en fonction de diverses conditions de largeur.

Par exemple, lorsque la largeur de l'écran est égale à 960px, changez la couleur de fond de la page web en rouge :

@media screen and (max-device-width:960px){
	body{
		background:red;
	}
}

Par exemple, lorsque la largeur de l'écran est maximale de 960 px (inférieure à 960 px), changez la couleur d'arrière-plan de la page Web en noir :

Par exemple, lorsque la largeur minimale de l'écran est de 960 px (supérieure à 960 px), modifiez la couleur d'arrière-plan de la page Web en orange :

@media screen and (max-width: 960px){
	body{
		background: #000;
	}
}

Ce qui est plus courant est une utilisation mixte, comme changer la couleur d'arrière-plan de la page Web en jaune lorsque la largeur de l'écran est comprise entre 960px et 1200px :

@media screen and (min-width:960px){
	body{
		background:orange;
	}
}

6. Idée globale de développement :

@media screen and (min-width:960px) and (max-width:1200px){
	body{
		background:yellow;
	}
}

L'idée générale de l'utilisation des requêtes multimédias en CSS3 est de déterminer la plage de largeur de la page Web sur différents appareils. Il peut y avoir trois types de ces gammes (PC, tablette, téléphone mobile), ou il peut y en avoir quatre types (PC, tablette, téléphone mobile moyen à grand écran, téléphone mobile à petit écran), bien sûr, vous n'aurez peut-être besoin que de deux types ( tablette, téléphone portable, côté PC n'a pas besoin d'être utilisé comme objet de requête multimédia CSS3 lors du développement d'une version distincte), et fournit les pages requises dans différentes plages de largeur. Appliquez différents styles CSS aux éléments pour s'adapter à différents appareils.

7. Problèmes de largeur dans le développement Web réactif :

Dans le développement réel, il est généralement nécessaire de définir la valeur maximale de la largeur de la page Web réactive. Une fois la largeur maximale ignorée, le Web. la mise en page sera gonflée ou fragmentée. Tout cela provoquera une inondation visuelle, ce qui, selon nous, semble faible.

Parlons également de la largeur des pages Web dans les appareils d'affichage actuels (en raison de problèmes d'espace, je ne commencerai pas par la révolution industrielle. Les largeurs les plus courantes actuellement sont essentiellement : Côté PC (1920px, 1600px). ) supérieure ou égale à 960px, 1440px, 1280px, 1140px, 960px), tablettes entre 960px et 640px (768px, 640px), et téléphones portables inférieurs à 640px (480px, 320px). Les largeurs ci-dessus existent depuis longtemps, et la largeur de la page Web dans le périphérique d'affichage sera à long terme. Dans cet état, lorsqu'il s'agit de conception de largeur de page Web réactive, il suffit fondamentalement de prendre en compte ces dimensions.

8. Récapitulatif de tous les paramètres de la requête média :

La requête média comprend également des fonctions associées qui ne sont pas couramment utilisées, comme indiqué ci-dessous :

largeur : Largeur visible du navigateur,
hauteur : hauteur visible du navigateur,
largeur de l'appareil : largeur de l'écran de l'appareil,
hauteur de l'appareil : la hauteur de l'écran de l'appareil,
orientation : détecte si l'appareil est actuellement en mode paysage ou portrait,

• aspect-ratio:检测浏览器可视宽度和高度的比例(例如：aspect-ratio:16/9)，

• device-aspect-ratio:检测设备的宽度和高度的比例，

• color:检测颜色的位数（例如：min-color:32就会检测设备是否拥有32位颜色），

• color-index:检查设备颜色索引表中的颜色（他的值不能是负数），

• monochrome:检测单色楨缓冲区域中的每个像素的位数（这个太高级，估计咱很少会用的到），

• resolution:检测屏幕或打印机的分辨率(例如：min-resolution:300dpi或min-resolution:118dpcm)，

• grid：检测输出的设备是网格的还是位图设备。

9.扩展——在CSS2中同样有媒体查询：

media媒体查询并不是CSS3诞生之后的专用功能，早在CSS2开始就已经支持media，比如：

在HTML文件中的标签中写入这句：

<link rel="stylesheet" type="text/css" media="screen" href="style.css">

以上是CSS2实现的衬线用法，href属性中写入在某单一显示设备中链接的CSS文件，但仅供入门，

如要判断移动设备是否为纵向放置的显示屏，可以这样写：

<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">

如要让小于960px的页面执行指定的CSS样式文件，可以这样写：

<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">

当然，CSS2中的媒体查询方法放到现在并不推荐使用，最大的弊端在于这样会增加页面http的请求次数，增加页面负担，使用CSS3中的媒体查询才是目前的最佳方法。

更多CSS3中的media媒体查询相关文章请关注PHP中文网！