CSS3 médias Requêtes

types de supports CSS2

@media règle est décrite dans CSS2, et peut être personnalisé pour différents types de supports différents règles de style.

Par exemple: Vous pouvez définir différentes règles de style pour différents types de médias (y compris les écrans, les appareils portables, téléviseurs, etc.).

Mais ces types de support multimédia sur de nombreux appareils encore suffisamment sympathiques.

CSS3 médias Requêtes

requête CSS3 multimédia hérite de tous les types de médias CSS2 pensée: Au lieu de trouver le type d'équipement, les paramètres d'affichage CSS3 selon l'adaptation.

requêtes des médias peuvent être utilisés pour détecter de nombreuses choses, telles que:

• les viewport (fenêtres) dans la largeur et la hauteur
• La largeur et la hauteur de l'appareil
• Vers (écran horizontal Smartphone, écran vertical).
• résolution

À l'heure actuelle, beaucoup pour le téléphone d'Apple, téléphone Android, tablette et autres appareils seront utilisés pour afficher la requête.

support du navigateur

Les chiffres du tableau représentent le premier navigateur pour soutenir le numéro de version de la propriété.

syntaxe de requête multimédia

enquête multimédia composée par une variété de médias, peut contenir une ou plusieurs expressions, l'expression est établie en fonction des conditions renvoie true ou false.

@media not|only mediatype and (expressions) {
    CSS-Code;
}

Si le type d'appareil de type correspondant de média spécifié, la requête renvoie true, le document montrera l'effet de style spécifié dans le dispositif correspondant.

Sauf si vous utilisez non seulement l'opérateur ou autrement, tous les styles seront adapter l'affichage sur tous les appareils.

• pas: pas être utilisé pour exclure certains dispositifs, tels que @media pas imprimer (matériel non-impression).

• seulement: pour définir certains types de supports spéciaux.Soutien aux médias Interroge appareils mobiles, s'il y a seulement un mot-clé, navigateur Web pour les appareils mobiles va ignorer le seul mot clé et d'expression après l'application directement à partir du fichier de style. Pour les médias Requêtes lorsque l'appareil ne supporte pas la capacité de lire, mais Type de support type de navigateur Web, mot-clé rencontré seulement ignore ce fichier de style.

• tous: tous les appareils, cela devrait toujours voir.

Vous pouvez également utiliser un différents fichiers de style sur différents supports:

types de média CSS3

Des exemples simples d'enquête multimédia

Utilisation de requêtes multimédias peut être utilisé pour remplacer le style original correspondant au style sur le périphérique spécifié.

Les exemples suivants changer les couleurs de fond sur le visible taille de la fenêtre de l'écran d'équipement supérieur à 480 pixels:

Les exemples suivants sont visibles dans la taille de la fenêtre de l'écran plus grand que 480 pixels flotteront à la page de menu de gauche:

CSS3 référence @media

Découvrez plus de contenu multimédia peut se référer @media règles.