378 votes

Médias peut redimensionnement des requêtes basées sur un élément div au lieu de l’écran ?

Je voudrais utiliser les media queries pour redimensionner des éléments en fonction de la taille de l' div élément qu'ils sont en. Je ne peux pas utiliser la taille d'écran que l' div est juste utilisé comme un widget à l'intérieur de la page web, et sa taille peut varier.

Mise à jour

Regarde comme il ya du travail fait sur ce maintenant: http://responsiveimagescg.github.io/eq-usecases/?utm_source=dlvr.it&utm_medium=twitter

267voto

BoltClock Points 249668

Non, les médias, les requêtes ne sont pas conçus pour fonctionner sur la base des éléments dans une page. Ils sont conçus pour des travaux fondés sur des appareils ou des types de médias (c'est pourquoi ils sont appelés les media queries). width, height, et une autre dimension à base de fonctionnalités de médias se réfèrent toutes les dimensions de la fenêtre ou de l'écran de l'appareil dans les médias. Ils ne peuvent pas être utilisés pour faire référence à un élément sur une page.

Si vous avez besoin d'appliquer des styles en fonction de la taille d'un certain div élément sur votre page, vous aurez à utiliser JavaScript pour observer les changements dans la taille de celle - div élément à la place des media queries.

123voto

MArc Points 948

Je viens de créer une cale de javascript pour atteindre cet objectif. Jetez un coup d’oeil si vous voulez, c’est une preuve de concept, mais prendre soin : c’est une version précoce et encore besoin de quelques travaux.

https://github.com/marcj/CSS-Element-Queries

40voto

haddnin Points 28

Une requête de média à l’intérieur d’une iframe peut fonctionner comme une requête d’élément. J’ai implémenter avec succès cela. L’idée est venue d’un post récent Sensible contre les publicités par Zurb. Sans Javascript !

7voto

cimmanon Points 25378

La question est très vague. Comme le dit BoltClock, demandes de renseignements ne connais que les dimensions de l’appareil. Toutefois, vous pouvez utiliser les requêtes médias en combinaison avec les sélecteurs de descendeur pour effectuer des ajustements.

La seule autre solution nécessite JS.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X