Meilleure solution/cadre de Responsive Design pour IE7

Pour ceux qui ne savent toujours pas sur le Responsive Design, je suggère ce lien

Aussi longtemps qu'il ne comprend pas les médias comme des requêtes sur:

@media screen and (max-width: 1280px)   {
    h1 { font-size: 120px; padding: 10px; color:#999999 !important; }
    h2{font-size:35px;}
}


@media screen and (max-width: 1024px)   {
    h1 { font-size: 90px; padding: 1px; color:#999 !important; }
    h2{font-size:25px;}

}

@media screen and (max-width: 740px)    {
    h1 { font-size: 70px; padding: 1px; color:#999 !important; }
    h2{font-size:16px;}
    .left-col { width: 100%; }
    .sidebar { width: 100%; }
}

@media screen and (max-width: 480px) {

}

@media screen and (max-width: 478px)    {
    h1 { font-size: 50px; padding: 1px; color:#999; }
    h2 { font-size: 12px; padding: 1px; }
    body { font-size: 13px; }
}

J'envisage d'utiliser adapt.js qui avec que vous pouvez Faire:

<script>
//Edit to suit your needs.
var ADAPT_CONFIG = {
  //Where is your CSS?
  path: 'assets/css/',

  //false = Only run once, when page first loads.
  //true = Change on window resize and page tilt.
  dynamic: true,

  //First range entry is the minimum.
  //Last range entry is the maximum.
  //Separate ranges by "to" keyword.
  range: [
    '0px    to 760px  = mobile.min.css',
    '760px  to 980px  = 720.min.css',
    '980px  to 1280px = 960.min.css',
    '1280px to 1600px = 1200.min.css',
    '1600px to 1940px = 1560.min.css',
    '1940px to 2540px = 1920.min.css',
    '2540px           = 2520.min.css'
  ]
};
</script>
<script src="assets/js/adapt.min.js"></script>

Il est destiné à être utilisé avec 960 grille Mais vous pouvez toujours utiliser ce que vous voulez dans ces .css

Mais le problème est que vous devez activer javascript. J'espérais que quelqu'un en sait plus souple (réactif!) la solution, tout?

serait apriciate commentaire pour downvote
merci pour le partage de la Smashing Magazine lien, info très intéressante!
je viens de recevoir en elle et je suis très impressionné!

OriginalL'auteur Toni Michel Caubet | 2011-09-16

  1. 14

    Juste à la recherche de ce. J'allais à utiliser adapt.js mais j'ai constaté quelques JS qui permet aux médias de fonctionnalités de requête sur les anciens navigateurs (y compris IE7).

    De cette façon, les navigateurs les plus récents sans JS fonctionne toujours correctement, la seule situation où le responsive design va revenir à la version la plus petite est sur

    Voici deux des meilleurs JS media query de base que j'ai trouvé:

    Répondre

    https://github.com/scottjehl/Respond

    Répondre est d'environ 3 ko lors de la compression et prend en charge la base des requêtes de média que vous auriez besoin pour simple responsive design (min/max-width)

    css3-mediaqueries-js

    http://code.google.com/p/css3-mediaqueries-js/

    Un peu plus grand à <16kb minimisé. Prend en charge un large éventail de médias requêtes (pas testé, mais il est référencé sur le Répondre le site)

    Respond.js est la voie à suivre 😉
    Je sais que je suis vraiment en retard à la fête, mais n'avez-vous essayé d'utiliser Respond.js avec twitter bootstrap ou de l'INTERFACE utilisateur Metro? Beaucoup d'entreprises clientes, toujours utiliser IE7-8, de sorte que le support est un must. :/

    OriginalL'auteur theorise

  2. 3

    Je ne sais pas de toute façon de faire un site web responsive dans IE6-8 sans l'aide de Javascript. Il est, cependant, possible de servir une version de bureau de votre site web à ces navigateurs et de le rendre sensible à tous les autres navigateurs. Je crois que c'est la meilleure approche, car IE6-8 sont (presque?) exclusivement utilisé sur les ordinateurs de toute façon.

    Cascade Cadre est le seul framework CSS je sais qu'avec un système de grille qui met en œuvre cette technique.

    Voir aussi cette démo.

    OriginalL'auteur John Slegers

  3. 0

    Je n'aimais pas l'idée de certaines des solutions de rechange pour faire les vieux navigateurs travail avec les media queries. Le chargement du fichier CSS via AJAX et de l'analyse, il ne semble pas très efficace pour moi.

    Une autre option pour rendre les sites sensibles pour IE7 ou même IE5/6 est d'utiliser JavaScript pour appliquer les classes en fonction de la largeur de l'écran, similaire aux demandes des médias. Cela fonctionne avec tous les navigateurs tant que JavaScript est activé. Vous pouvez avoir une résolution par défaut qui est servi si JavaScript est désactivé.

    Cela est décrit ici.

    Quelques exemples de JavaScript pour ce faire:

    <script type="text/javascript">
function hasClass(el, cls) {
return el.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(el, cls) {
if (!this.hasClass(el, cls)) el.className += " " + cls;
}
function removeClass(el, cls) {
if (hasClass(el, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
el.className = el.className.replace(reg, ' ');
}
}
var addEvent = function (elem, type, eventHandle) {
if (elem == null || elem == undefined) return;
if (elem.addEventListener) {
elem.addEventListener(type, eventHandle, false);
} else if (elem.attachEvent) {
elem.attachEvent("on" + type, eventHandle);
} else {
elem["on" + type] = eventHandle;
}
};
function responsive() {
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
for (var i = 0; i < breakpoints.length; i++) {
if (breakpoints[i][0] == "max-width") {
if (w <= breakpoints[i][1]) {
addClass(document.getElementById(id), breakpoints[i][2]);
}
else {
removeClass(document.getElementById(id), breakpoints[i][2]);
}
}
else if (breakpoints[i][0] == "min-width") {
if (w >= breakpoints[i][1]) {
addClass(document.getElementById(id), breakpoints[i][2]);
}
else {
removeClass(document.getElementById(id), breakpoints[i][2]);
}
}
}
}
var resizeTimeoutId;
function resized() {
window.clearTimeout(resizeTimeoutId);
resizeTimeoutId = window.setTimeout('responsive();', 10);
}
var id = "body";
var breakpoints = [["max-width", 630, "max630"], ["min-width", 1890, "min1890"]];
addEvent(window, "resize", resized);
responsive();
</script>

    OriginalL'auteur johna