Les requêtes multimédias permettent l'application conditionnelle de styles CSS basés sur les types de supports, tels que l'écran et l'impression, et les conditions des fonctionnalités multimédias, telles que la hauteur et la largeur de la fenêtre d'affichage et de l'appareil. Ils font partie de la spécification W3C CSS3.
Lors de l'écriture d'une requête multimédia CSS, existe-t-il un moyen de spécifier plusieurs conditions avec la logique "OU"? J'essaie de faire quelque chose comme ça: /* This doesn't work */ @media screen and (max-width: 995px OR max-height: 700px) { ...
Quelle est la différence entre screenet only screendans les requêtes média? <link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> <link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> Pourquoi devons-nous utiliser only...
J'ai fait des recherches sur les requêtes multimédias et je ne comprends toujours pas comment cibler des appareils de certaines tailles. Je veux pouvoir cibler les ordinateurs de bureau, les tablettes et les mobiles. Je sais qu'il y aura des divergences mais ce serait bien d'avoir un système...
J'utilise Bootstrap 3 pour créer une mise en page réactive dans laquelle je souhaite ajuster quelques tailles de police en fonction de la taille de l'écran. Comment puis-je utiliser des requêtes multimédias pour créer ce type de
Je voudrais utiliser des requêtes multimédias pour redimensionner des éléments en fonction de la taille d'un divélément dans lequel ils se trouvent. Je ne peux pas utiliser la taille de l'écran car il divest simplement utilisé comme un widget dans la page Web, et sa taille peut varier. Mettre à...
J'ai besoin de charger dynamiquement des images de bannière dans une application HTML5 et j'aimerais que deux versions différentes correspondent à la largeur de l'écran. Je ne peux pas déterminer correctement la largeur d'écran du téléphone, donc la seule façon d'y penser est d'ajouter des images...
J'ai trouvé ce morceau de code dans un fichier CSS dont j'ai hérité, mais je n'y trouve aucun sens: @media screen and (max-width: 1024px){ img.bg { left: 50%; margin-left: -512px; } } Concrètement, que se passe-t-il sur la première
J'ai besoin de développer des pages html pour les téléphones iphone / android, mais quelle est la différence entre max-device-widthet max-width? J'ai besoin d'utiliser différents CSS pour différentes tailles d'écran. @media all and (max-device-width: 400px) @media all and (max-width: 400px) Quelle...
J'ai cette @mediaconfiguration: HTML : <head> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head> CSS : @media screen and (min-width: 769px) { /* STYLES HERE */ } @media screen and (min-device-width: 481px) and (max-device-width: 768px) { /* STYLES HERE...
J'ai un grand site qui s'exécute dans ASP.NET MVC en utilisant le moteur de vue Razor. J'ai une feuille de style de base qui contient tous les styles génériques pour l'ensemble du site. À l'occasion, cependant, j'ai des styles spécifiques à la page qui dans <head>la page - généralement c'est...
J'utilise Twitter Bootstrap sur un projet. En plus des styles d'amorçage par défaut, j'ai également ajouté certains de mes propres styles //My styles @media (max-width: 767px) { //CSS here } J'utilise également jQuery pour modifier l'ordre de certains éléments sur la page lorsque la largeur de la...
Dans le style.css, j'utilise des requêtes multimédias, qui utilisent toutes deux une variante de: /*--[ Normal CSS styles ]----------------------------------*/ @media only screen and (max-width: 767px) { /*--[ Mobile styles go here]---------------------------*/ } Les sites se redimensionnent à la...
IE8 ne prend-il pas en charge la requête multimédia CSS suivante: @import url("desktop.css") screen and (min-width: 768px); Sinon, quelle est la manière alternative d'écrire? La même chose fonctionne très bien dans Firefox. Des problèmes avec le code ci-dessous? @import url("desktop.css") screen;...
Je suis nouveau ici dans cette entreprise et nous avons un produit qui utilise des kilomètres de CSS. J'essaie de créer une feuille de style imprimable pour notre application, mais j'ai des problèmes avec background-colorin @media print. @media print { #header{display:none;}
Dans la documentation des requêtes multimédias Bootstrap 3, il est dit: Nous utilisons les requêtes multimédias suivantes dans nos fichiers Less pour créer les points d'arrêt clés dans notre système de grille. Appareils très petits (téléphones, moins de 768px): aucune requête multimédia car il...
En JavaScript, le mode d'orientation peut être détecté en utilisant: if (window.innerHeight > window.innerWidth) { portrait = true; } else { portrait = false; } Cependant, existe-t-il un moyen de détecter l'orientation en utilisant uniquement CSS? Par exemple. quelque chose comme: @media only...
J'essaie d'utiliser des requêtes multimédias CSS3 pour créer une classe qui n'apparaît que lorsque la largeur est supérieure à 400px et inférieure à 900px. Je sais que c'est probablement extrêmement simple et qu'il me manque quelque chose d'évident, mais je ne peux pas le comprendre. Ce que j'ai...
J'essaie d'utiliser des variables CSS dans la requête multimédia et cela ne fonctionne pas. :root { --mobile-breakpoint: 642px; } @media (max-width: var(--mobile-breakpoint)) { }
L'iPhone 5 a un écran plus long et il ne capte pas la vue mobile de mon site Web. Quelles sont les nouvelles requêtes de conception réactive pour l'iPhone 5 et puis-je les combiner avec les requêtes iPhone existantes? Ma requête média actuelle est la suivante: @media only screen and...
Existe-t-il un moyen d'obtenir la largeur de l'appareil des utilisateurs, par opposition à la largeur de la fenêtre, en utilisant javascript? Les requêtes multimédias CSS offrent cela, comme je peux le dire @media screen and (max-width:640px) { /* ... */ } et @media screen and...