proportionnelle - Comment écrire du HTML différent pour différentes tailles d'écran




html img title (4)

Je peux me tromper, mais je pense que la sélection de CSS par résolution aurait besoin d'un peu d'aide de javascript.

Voici un exemple rapide de ce à quoi js pourrait ressembler, intégré dans jquery:

$(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"});
  }
});

J'espère que cela pourra aider.

https://code.i-harness.com

J'ai compris comment je change de CSS via des requêtes media (comme media = "screen et (max-width: 640px)")

mais disons que je veux écrire (juste par exemple)

<div>
[if screen resolution is lower then 960 px]
    <div>
    some new text only for lower resolution
    </div>
[end of condition]
</div>

Quelle est la condition que j'ai besoin d'écrire pour bien faire les choses?


Pour autant que je l'ai expérimenté, vous ne pouvez pas faire des requêtes de médias à l'intérieur des pages HTML. Vous devez le faire depuis votre CSS.

Mais si vous voulez afficher un texte spécial seulement quand il est en dessous d'une certaine résolution, pourquoi ne pas le rendre visible quand la résolution est inférieure à 960px?

Créer des designs réactifs est très différent d'un design régulier, car il faut penser beaucoup plus (ce qui est haaard)


vous pouvez le vérifier en utilisant l'objet écran javascript:

screen.width 

ou vous pouvez le faire avec css

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

http://css-tricks.com/6206-resolution-specific-stylesheets/ http://www.javascriptkit.com/howto/newtech3.shtml


Vous pouvez ajouter la fonction jQuery pour changer de style dynamiquement selon la résolution d'éboulis.

if(screen.width==1600)
       { 
        jQuery('#hb-gotop').removeAttr("margin-left", "-0.9");
        jQuery('#hb-gotop').attr('style', 'margin-left: -0.7%');
       }
        else if(screen.width==1280)
       { 
        jQuery('#hb-gotop').removeAttr("margin-left", "-0.9");
        jQuery('#hb-gotop').attr('style', 'margin-left: -0.9%');
       }    
       else if(screen.width==1024)
       { 
        jQuery('#hb-gotop').removeAttr("margin-left","-0.9");
        jQuery('#hb-gotop').attr('style', 'margin-left: -1.1%');
       }
        else if(screen.width==800)
        { 
        jQuery('#hb-gotop').removeAttr("margin-left","-0.9");
        jQuery('#hb-gotop').attr('style', 'margin-left: -1.3%');
       }




responsive-design