Sélectionnez différentes feuilles de style CSS pour différentes tailles de fenêtre de navigateur?

J'ai mon centre de div (#box) au milieu de la fenêtre du navigateur qui est groovy pour les navigateurs de 600px verticaux ou plus grands. Si la fenêtre est plus petite que celle-ci, le contenu en haut de la div est coupé et la barre de défilement ne fait que faire défiler la page (lorsque je tire la barre de défilement vers le bas), il est donc impossible de voir quelque chose caché au-dessus du bord supérieur de La fenêtre même lorsque la barre de défilement est à sa position la plus haute.

Voici comment je centre mon div – vous pouvez voir pourquoi le haut de la div est coupé dans les petites fenêtres du navigateur.

{position: absolute; top: 50%; left: 50%; width: 1930px; height: 607px; margin-left: -965px; margin-top: -302px;}

(Il est vraiment large d'accueillir l'animation fonctionnant même sur les écrans les plus larges – la largeur n'est pas un problème.)

Voici une page à suivre: http://ianmartinphotography.com/test-site/
Et mon CSS: http://ianmartinphotography.com/test-site/css/basic.css

Ceci est facilement corrigé dans ma feuille de style CSS, mais il me semble que je ne peux pas l'avoir dans les deux sens pour des moniteurs supérieurs à 600px et des moniteurs inférieurs à 600px.

Alors, comment détecter une taille de fenêtre de navigateur, puis sélectionner l'une des deux feuilles de style CSS différentes? L'une pour les petites fenêtres, une autre pour les grandes fenêtres? Y a-t-il un script jquery qui fera cela pour moi?

Ou, existe-t-il une autre façon de faire de mon centre div au milieu de la fenêtre du navigateur avec CSS qui permettra le défilement afin que le haut de la div puisse être consulté sur les fenêtres du navigateur plus petites?

Merci pour vos pensées!

Les requêtes @media sont mes préférences (j'ai vu que vous ne les aimiez pas en tant que solution en soi), mais ils ont vraiment réussi à faire le truc – surtout si vous ajoutez un peu votre css pour y répondre.

 <link...media="only screen and (max-height: 600px)" href="small-device.css" /> small-device.css = div.container { ... height:500px; margin:50%; ...} <link...media="only screen and (min-height: 601px)" href="big-device.css" /> big-device.css = div.container {... height:600px; margin:50%; ...}

Vous pouvez également avoir un peu plus de chance en supprimant votre positionnement absolu et en profitant du flux normal de documents. Cela vous aiderait à ajouter des choses comme { overflow-y:scroll; } { overflow-y:scroll; } Aux divs cachés par écran.

Je pense en fin de compte, si vous essayez de concevoir autour des appareils portatifs, vous aurez besoin de requêtes média dans une certaine mesure. Mon écran Android (par exemple) a 3 options d'affichage (bas, moyen, bonjour, déf). Les 3 pages de recadrage différemment.

Vous pouvez déterminer la taille de la fenêtre par Jquery

 $(window).width(); $(window).height();

 $(document).width(); $(document).height();

Puis changer css

 $("link").attr("href", "blue.css");

Quelque chose comme ça:

 $(document).ready(function(){ if($(document).height() > 600 or $(window).height() > 600){ $("link").attr("href", "600+.css"); } else { $("link").attr("href", "600-.css"); } });

Une solution qui fonctionne dans tous les principaux navigateurs. Il n'y avait pas besoin de JS. Centré verticalement / horizontalement, défilable, colle au sommet lorsque le contenu est plus grand que la fenêtre.

HTML:

 <div id="body">[your content goes here]</div>

CSS:

 html, body { width: 100%; height: 100%; } html { display: table; } body { display: table-cell; vertical-align: middle; } #body { margin: 0 auto; }

N'oubliez pas d'appliquer la dernière règle, elle effectuera réellement le centrage horizontal.

Juste un peu de googling et a trouvé ceci:

http://www.ilovecolors.com.ar/detect-screen-size-css-style/

est-ce que ça marche pour toi?

Essayez le cadre moins CSS: http://lessframework.com/ ,

Vous n'avez pas besoin de JavaScript, mais vous pouvez utiliser CSS @Media pour définir des styles en fonction de la résolution / taille de l'écran.

Bonne chance

Utilisez le conditionnel JavaScript suivant pour détecter la taille de l'écran.

function x() traitera l'insertion de la liaison CSS dans la <head> . Tout ce que vous devez faire est d'appeler la fonction et de passer le nom du fichier CSS.

 < script type = "text/javascript" > <!-- function x(y) { var styles = y; var newSS = document.createElement('link'); newSS.rel = 'stylesheet'; newSS.href = 'data:text/css,' + styles; document.getElementsByTagName("head")[0].appendChild(newSS); } if ((screen.width >= 1024) && (screen.height >= 768)) { x('file.css'); } else { x('file1.css'); } //--> < /SCRIPT>

Si "document_height" ne fonctionne pas, essayez "window_height", je le formule dans le code!

$("link").attr("href", "css_file_path"); // ici doit insérer le chemin d'accès à votre css, le remplacer par le code ci-dessous

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" ></script> <script type="text/javascript"> $(document).ready(function(){ document_height = $(document).height(); //window_height = $(window).height(); //if(window_height > 600){ if(document_height > 600){ alert('Bigger than 600px height: ' + $(document).height()); $("link").attr("href", "600+.css"); // Here load css if window is bigger then 600px; } else { alert('Smaller than 600px height: ' + $(document).height()); $("link").attr("href", "600-.css"); // Here load css if window is smaller then 600px; } }); </script>