Je me demandais ce qui serait le plus correct lors du choix des informations à afficher, que ce soit les balises ou
serait-il préférable d'utiliser JavaScript quelque chose comme
@media only screen and (max-width: 0) {
.mobile-version{
display:block
}
.tablet-version{
display:none;
}
.desktop-version{
display:none;
}
}
@media only screen and (max-width: 500) {
.mobile-version{
display:none;
}
.tablet-version{
display:block;
}
.desktop-version{
display:none;
}
}
@media only screen and (max-width: 1000) {
.mobile-version{
display:none;
}
.tablet-version{
display:none;
}
.desktop-version{
display:block;
}
}
ou plutôt utilisez des requêtes multimédias CSS quelque chose comme
var screenSize = screen.width;
if (screenSize >= 500) {
//display image or video or text
} else if (screenSize >= 1000) {
//dislpay a different image or video or text
} else {
//display something different
}
tout conseil serait apprécié (merci d'avance)
4 Réponses :
Je pense que c'est une question de préférence et dépend de votre application.
Si vous avez l'intention d'avoir des éléments plus complexes ou dynamiques qui contiennent une sorte de logique, alors JavaScript pourrait être mieux adapté et vous donner plus de contrôle. Vous aimeriez peut-être avoir des préférences utilisateur telles que l'activation / la désactivation de la lecture automatique de la vidéo, etc.
Cependant, si vous souhaitez simplement effectuer un affichage conditionnel simple, le CSS est votre ami.
Mon conseil serait de choisir la solution la plus simple pour vous, qui semble être CSS, et d'éviter de mélanger les deux dans une seule application.
En ce moment, pour mon application, c'est une vidéo qui se joue automatiquement en arrière-plan en fonction de la taille de l'écran de l'appareil, je voudrais différentes versions afin qu'elle montre tout en meilleure qualité
ok génial alors mal donner à chaque source de la vidéo une classe différente et se cacher en fonction de ce qui est nécessaire merci mec
Pour ce que vous cherchez à accomplir, je devrais dire des requêtes multimédias simplement en raison de la simplicité de leur configuration / ajustement. Pourquoi réinventer la roue correctement?
serait-il préférable d'utiliser JavaScript quelque chose comme ...
Allez-y plutôt avec CSS car il est destiné à résoudre votre problème.
MAIS, vous avez également mentionné l'utilisation des balises . Bien que le redimensionnement des balises HTML à l'aide de CSS soit suffisant, vous devrez peut-être utiliser javascript pour transmettre la résolution souhaitée au lecteur vidéo, en fonction de la taille de la fenêtre d'affichage. Surtout si vous avez plusieurs résolutions du même fichier vidéo. (vous ne voulez pas jouer en 1080p dans une boîte de 640x320) Dans ce cas, vous pouvez obtenir la largeur de l'écran en utilisant window.outerWidth , window.innerWidth , document .documentElement.clientWidth . Tous ceux-ci produisent des résultats différents , mais le second vous donnera des valeurs identiques aux points d'arrêt CSS.
d'accord, j'ai 2 vidéos différentes qui seront lues en fonction de la taille, (un portrait pour les versions mobiles), puis une autre plus paysage (la même vidéo est de taille différente) pour les tablettes et le bureau.Des conseils sur la façon dont je le ferais?
Cela dépend beaucoup du lecteur que vous comptez utiliser. Dans le cas où le lecteur peut détecter ses propres dimensions à l'écran, il choisira également une source vidéo correspondante parmi celles que vous laissez utiliser. Dans le cas où le lecteur n'est pas «intelligent», vous devez charger dynamiquement la source vidéo après avoir détecté ces dimensions du lecteur: SI l'élément vidéo ou le DIV enveloppant il a une largeur de X, puis utilisez widthX.mp4 comme source.
De plus, dans votre scénario, si la vidéo n'est pas en plein écran, la taille du lecteur réel est plus importante que la taille de la fenêtre. Ensuite, après .onload () , utilisez JS pour détecter la dimension de l'élément vidéo et charger une source vidéo basée sur celle-ci.
ok ça a du sens merci :)
Je pense que cela dépend de votre application ou de votre projet. Si vous souhaitez afficher un élément dynamique ou une logique, javascript est une bonne option et pour l'affichage conditionnel simple, le CSS sera la meilleure option.
Je pense que la requête multimédia est suffisante pour afficher un élément conditionnel.