Comment utiliser les requêtes multimédias CSS3

La fonction

media query de css3 permet de réaliser une responsive layout En fait, le principe de base est d'utiliser la fonction css3 media query (media/meta) pour connaître la taille. de l'appareil, puis écrivez Écrivez ou écrasez les styles CSS dans différentes tailles pour modifier l'apparence de l'interface. Ensuite, laissez-moi vous expliquer comment utiliser les requêtes multimédias CSS3.

Conception Web adaptative

Intégrer les compétences de développement existantes (mise en page de grille flexible, images flexibles, médias et requêtes média)

Conception Web réactive intégrée et nommée

est un mécanisme d'affichage pour une mise en page "parfaite" du contenu Web pour n'importe quel appareil.

En bref, un site web peut être compatible avec plusieurs terminaux - plutôt que de faire une version spécifique pour chaque terminal.

Avantages

L'expérience visuelle et opérationnelle multi-terminal est très cohérente

Compatible avec les nouveaux appareils actuels et futurs

La plupart des technologies de conception Web réactive peuvent Utilisé dans le développement de WebApp

Il permet d'économiser les coûts de développement et les coûts de maintenance sont également considérablement réduits

Inadéquation

Compatibilité : il existe des problèmes de compatibilité avec les versions inférieures des navigateurs

Trafic de bande passante mobile : par rapport aux sites Web personnalisés pour téléphones mobiles, le trafic est légèrement plus important,

mais par rapport au chargement d'un site Web PC complet, il est évidemment beaucoup plus petit

Le code est encombrant et il y aura des éléments inutiles cachés. Temps de chargement plus long

Compatible avec divers appareils et charge de travail lourde

Mobile d'abord

Dans les premières étapes de la conception, nous devons considérer la façon dont la page est créée. sera affiché sur plusieurs terminaux

Amélioration progressive

Tirez le meilleur parti de votre périphérique matériel

À quoi convient-il ?

Pour les sites Web riches en contenu, tels que l'affichage d'images, il est plus approprié d'utiliser une conception Web réactive

Qu'est-ce qui n'est pas applicable ?

Pour les sites Web dotés de fonctionnalités lourdes, comme le commerce électronique, il est plus recommandé d'utiliser des sites Web mobiles indépendants

CSS3-media Query (requête multimédia)

javascript

Framework open source tiers

 Bootstrap

Opérations d'attributscommunes

Device-width/ Device-Height Largeur et hauteur de l'écran de l'appareil

largeur/hauteur (largeur de la fenêtre de rendu) Largeur d'affichage réelle

résolution Résolution de l'appareil

orientation Orientation de l'appareil

écran vertical portrait/PAYSAGE ou écran horizontal

Page de réglage de l'échelle initiale taux de zoom initial (0-10,0)

Utilisateur-SCALABLE définit si l'utilisateur peut zoomer (oui/non)

minimum-scale Réglez le taux de réduction minimum (0-10,0)

maximum-scale Réglez le taux d'agrandissement maximum (0-10,0)

C'est tout ce qu'il y a à savoir à propos des requêtes multimédias , pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois php !

Lecture connexe :

Comment utiliser l'ombre de la police CSS3 text-shadow

Comment choisir la balise HTML appropriée

À quoi devez-vous faire attention lors du centrage d'un div en HTML

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!