Les requêtes multimédias peuvent-elles être redimensionnées en fonction d'un élément div au lieu de l'écran?
J'aimerais utiliser des requêtes multimédia pour redimensionner des éléments en fonction de la taille d'un élément div dans lequel ils se trouvent. Je ne peux pas utiliser la taille de l'écran, car la div est simplement utilisée comme un widget dans la page Web et sa taille peut varier.
Mettre à jour
On dirait que des travaux sont en cours à cet égard: https://github.com/ResponsiveImagesCG/cq-demos
Non, les requêtes multimédias ne sont pas conçues pour fonctionner en fonction des éléments d'une page. Ils sont conçus pour fonctionner en fonction de périphériques ou types de média (d'où leur nom de requête media). width , height , ainsi que d'autres fonctionnalités de média basées sur des dimensions, désignent toutes les dimensions de la fenêtre d'affichage ou de l'écran du périphérique dans un média basé sur écran. Ils ne peuvent pas être utilisés pour faire référence à un élément donné sur une page.
Si vous devez appliquer des styles en fonction de la taille d'un certain élément div sur votre page, vous devez utiliser JavaScript pour observer les modifications de la taille de cet élément div à la place des requêtes multimédia.
Je viens de créer un fichier javascript pour atteindre cet objectif. Regardez si vous voulez, c'est une preuve de concept, mais prenez garde: c'est une version précoce qui a encore besoin de travail.
Une requête multimédia à l'intérieur d'un iframe peut fonctionner comme une requête d'élément. J'ai réussi à implémenter ceci. L'idée est venue d'un article récent sur Responsive Ads de Zurb. Pas de Javascript!
Ce n'est actuellement pas possible avec CSS seul, comme l'a écrit @BoltClock dans la réponse acceptée, mais vous pouvez contourner ce problème en utilisant JavaScript.
J'ai créé un prolyfill (alias element query) contenant des requêtes pour résoudre ce genre de problème. Cela fonctionne un peu différemment des autres scripts, vous n’avez donc pas à modifier le code HTML de vos éléments. Tout ce que vous avez à faire est d’inclure le script et de l’utiliser dans votre CSS comme suit:
.element:container(width > 99px) {
/* If its container is at least 100px wide */
}
J'ai rencontré le même problème il y a quelques années et j'ai financé le développement d'un plugin pour m'aider dans mon travail. J'ai publié le plugin en tant que source ouverte afin que d'autres puissent en profiter également, et vous pouvez le récupérer sur Github: https://github.com/eqcss/eqcss
Il existe plusieurs manières d'appliquer différents styles réactifs en fonction de ce que nous pouvons savoir sur un élément de la page. Voici quelques requêtes d’éléments que le plugin EQCSS vous permettra d’écrire en CSS:
@element 'div' and (condition) {
$this {
/* Do something to the 'div' that meets the condition */
}
.other {
/* Also apply this CSS to .other when 'div' meets this condition */
}
}
Alors, quelles conditions sont prises en charge pour les styles responsive avec EQCSS?
Requêtes de poids
- min-width in
px - largeur min en
% - max-width in
px - largeur max en
%
Requêtes de hauteur
- min-height in
px - hauteur-min dans
% - hauteur-maximum en
px - hauteur maximale dans
%
Compter les requêtes
- min-caractères
- max caractères
- min-lignes
- max-lignes
- min-enfants
- max-enfants
Sélecteurs Spéciaux
Dans les requêtes d'élément EQCSS, vous pouvez également utiliser trois sélecteurs spéciaux qui vous permettent d'appliquer plus spécifiquement vos styles:
$this(le ou les éléments correspondant à la requête)$parent(le (s) élément (s) parent (s) de l'élément (s) correspondant à la requête)$root(l'élément racine du document,<html>)
Les requêtes d'élément vous permettent de composer votre mise en page à partir de modules de conception réactifs, chacun avec un peu de "conscience de soi" de la façon dont ils sont affichés sur la page.
Avec EQCSS, vous pouvez concevoir un widget de 150 à 150 pixels de large, puis déposez-le en toute confiance dans la barre latérale de la page via n'importe quel modèle (sur n'importe quel site) et
La question est très vague. Comme le dit BoltClock, les requêtes multimédia ne connaissent que les dimensions du périphérique. Cependant, vous pouvez utiliser des requêtes multimédia en combinaison avec des sélecteurs de descendant pour effectuer les réglages.
.wide_container { width: 50em }
.narrow_container { width: 20em }
.my_element { border: 1px solid }
@media (max-width: 30em) {
.wide_container .my_element {
color: blue;
}
.narrow_container .my_element {
color: red;
}
}
@media (max-width: 50em) {
.wide_container .my_element {
color: orange;
}
.narrow_container .my_element {
color: green;
}
}
La seule autre solution nécessite JS.
La seule façon dont je peux penser que vous pouvez accomplir ce que vous voulez uniquement avec les CSS est d'utiliser un conteneur de fluide pour votre widget. Si la largeur de votre conteneur correspond à un pourcentage de l'écran, vous pouvez utiliser des requêtes multimédia pour styler en fonction de la largeur de votre conteneur, car vous saurez maintenant quelles sont les dimensions de votre conteneur pour les dimensions de chaque écran. Par exemple, supposons que vous décidiez de définir 50% de la largeur de l'écran de votre conteneur. Ensuite, pour une largeur d'écran de 1200 pixels, vous savez que votre conteneur est de 600 pixels.
.myContainer {
width: 50%;
}
/* you know know that your container is 600px
* so you style accordingly
*/
@media (max-width: 1200px) {
/* your css for 600px container */
}
Je pensais aussi aux requêtes des médias, mais ensuite j'ai trouvé ceci:
- http://www.mademyday.de/css-height-equals-width-with-pure-css.html
- Conserver les proportions d'une div avec CSS
Créez simplement un wrapper <div> avec une valeur de pourcentage pour padding-bottom, comme ceci:
div {
width: 100%;
padding-bottom: 75%;
background:gold; /** <-- For the demo **/
}<div></div>Il en résultera un <div> avec une hauteur égale à 75% de la largeur de son conteneur (format 4: 3).
Cette technique peut également être associée à des requêtes multimédia et à un peu de connaissance ad hoc sur la mise en page pour un contrôle encore plus fin.
C'est suffisant pour mes besoins. Ce qui pourrait suffire à vos besoins aussi.
Pour le mien, je l'ai fait en définissant la largeur maximale de la div. Par conséquent, le petit widget ne sera pas affecté et le grand widget est redimensionné en raison du style largeur maximale.
// assuming your widget class is "widget"
.widget {
max-width: 100%;
height: auto;
}