J'ai compris comment je modifie CSS via des requêtes multimédias (telles que Media = "et (max-largeur: 640px)")
Mais disons que je veux écrire (juste par exemple) p>
<div>
[if screen resolution is lower then 960 px]
<div>
some new text only for lower resolution
</div>
[end of condition]
</div>
7 Réponses :
Autant que j'ai connu, vous ne pouvez pas faire de requêtes de média dans les pages HTML. Vous devez le faire de votre CSS.
Mais si vous voulez montrer du texte spécial uniquement lorsqu'il est inférieur à une certaine résolution, pourquoi non seulement le rendre visible lorsque la résolution est inférieure à 960px?
Créer des conceptions réactives est très différent d'un design régulier, car vous devez penser beaucoup plus (ce qui est Haaard)
Je n'ai pas pensé à l'affichage: aucune option - je pense que cela devrait faire le travail
Vous devez attribuer un identifiant (ou une classe ou une autre façon de trouver votre élément de CSS) au code>, puis de définir une définition de requête multimédia comme celle-ci: <div id="mydiv">...</div>
<style type="text/css">
@media screen and (min-width: 961px) {
div#mydiv { display: none }
}
</style>
Ce n'est pas avoir d'être un identifiant, cela peut être tout ce qui permet à l'OP de cibler l'élément. Je soupçonne que j'utiliserais une classe afin que je puisse mettre plus d'un d'entre eux sur une page si je le voulais.
Vrai. Il semblait simplement que je pensais qu'un identifiant d'être le meilleur choix ... mais oui ... une classe ou juste une hiérarchie des tags travaillerait également si les circonstances le permettent.
Vous pouvez le vérifier via à l'aide d'un objet d'écran JavaScript: ou vous pouvez le faire avec CSS
Je pourrais avoir tort, mais je pense que la sélection CSS par résolution aurait besoin d'un peu d'aide de JavaScript.
Voici un exemple rapide de ce que JSA pouvait ressembler, intégré à JQuery: P>
$(document).ready(function() {
if ((screen.width>=1024) && (screen.height>=768)) {
alert('Screen size: 1024x768 or larger');
$("link[rel=stylesheet]:not(:first)").attr({href : "detect1024.css"});
}
else {
alert('Screen size: less than 1024x768, 800x600 maybe?');
$("link[rel=stylesheet]:not(:first)").attr({href : "detect800.css"});
}
});
Vous pouvez ajouter jQuery fonction pour modifier le style de manière dynamique selon la résolution de l'écran.
réponse a été utile de:
Si la résolution de l'écran est inférieur à x Ajoutez CSS
Vous pouvez le faire entièrement avec CSS 3 à l'aide de la commande @Media. @media (min -Width: 960PX) {CSS ...} // Rien avec la taille de l'écran inférieure à 960px ** Jason whitd fait un bon point, c'est CSS 3 seulement, donc cela ne fonctionnera pas avec plus âgé Les navigateurs (il devrait fonctionner avec tous les navigateurs modernes).
Vous pouvez aussi bien faire l'écran ou le périphérique modifier @media écran {.nomobile {affichage: bloc; }} // Desktops / ordinateurs portables @MeMedia Handheld {.Nomobile {Affichage: Aucun; } } //appareils mobiles
Ou vous pouvez supposer que les appareils mobiles auront une largeur plus petite et allez sur cela.
Je passe réellement à travers la même situation et que vous avez constaté que si vous voulez faire cela, vous pouvez réellement ajouter tout le texte de la page HTML, puis la masquer sur les largeurs d'écran que vous ne voulez pas qu'il affiche. Par exemple: , puis vous pouvez ajouter css: J'espère que cela fonctionne bien :)
Je suggérerais de cacher cet élément avec CSS, puis d'utiliser les requêtes de média (que vous utilisez déjà) pour le montrer sur des résolutions inférieures. Y a-t-il une raison pour laquelle vous ne faites pas cela?
Est-ce pour afficher quelque chose de différent selon qu'il s'agisse d'un ordinateur ou d'un appareil mobile?
L'objectif principal est de séparer mobile du bureau. Je voulais juste savoir si cela est possible et si cela est classique. Je suppose que par toutes les réponses qu'il est préférable de le faire avec CSS