Nous développons une application Web open-source pour les professeurs d'art à travers le monde pour travailler ensemble. Nous avons besoin d'un joli site Web qui s'ajuste simplement en fonction de la largeur active du navigateur, comme Google.org ou Barackobama.com le fait si bien.
Nous pouvons détecter le navigateur, le système d'exploitation, etc. Mais vous ne voulez utiliser aucune de ces informations. Nous voulons juste quatre ou cinq feuilles de style différentes qui sont déclenchées lorsque la largeur du navigateur est ajustée.
Donc, par exemple, lorsque vous visitez l'application sur un navigateur à l'aide d'un ordinateur de bureau, vous voyez l'application complète lorsque le navigateur est en plein écran. Ensuite, lorsque le navigateur réduit sa largeur, le site modifie immédiatement et modifie de manière dynamique son format pour permettre une compatibilité universelle.
Nous ne voulons pas que notre CSS change en fonction du type de navigateur ou de la largeur d'origine, mais il souhaite plutôt qu'il ajuste jamais millisecond basé sur la largeur de courant de la fenêtre - quel que soit ou non un périphérique "mobile" ou une machine "tablette" ou un navigateur "Desktop".
Curieusement, j'utilise le script Google Apps pour héberger notre application Web, il semble donc que les balises de méta ci--planport soient supprimées.
Comment pouvons-nous introduire quatre ou cinq feuilles de style différentes en fonction de la largeur de la fenêtre de navigateur de visualisation actuelle?
4 Réponses :
Vous pouvez soit utiliser des requêtes de média CSS, comme:
function adjustStyle(width) {
width = parseInt(width);
if (width < 701) {
$("#size-stylesheet").attr("href", "css/narrow.css");
} else if ((width >= 701) && (width < 900)) {
$("#size-stylesheet").attr("href", "css/medium.css");
} else {
$("#size-stylesheet").attr("href", "css/wide.css");
}
}
$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});
Je pense que vous avez min-périphérique-largeur et max-périphérique-largeur inversé dans les requêtes multimédias.
Les requêtes de média CSS sont le moyen d'aller
vous pouvez faire avec CSS.
<link rel='stylesheet' media='screen and (max-width: 480px)' href='css/mobile.css' /> <link rel='stylesheet' media='screen and (min-width: 481px)' href='css/pc.css' />