Comment utiliser Response.js pour résoudre la mise en page réactive d'IE6 ~ 8

La mise en page responsive, idéalement, répond à divers terminaux PC/mobiles. Les requêtes multimédias sont prises en charge par IE9+ et d'autres navigateurs modernes, mais IE8 occupe toujours une part de marché relativement importante sur le marché, nous devons donc considérer les navigateurs bas de gamme d'IE.

Alors, comment rendre la mise en page réactive compatible avec les navigateurs IE6~8 ? Ici, nous devons utiliser un tel fichier : répondre.js. Adresse de téléchargement du fichier : https://github.com/scottjehl/Respond.

Rappel amical, mes amis, il y a certaines choses auxquelles il faut faire attention lors de l'utilisation de Answer.js. Une fois que vous n'y prêtez pas attention, elles ne seront pas affichées dans IE6-8.

Écrire des styles de base

Pour implémenter une mise en page réactive, vous devez d'abord écrire des styles de mise en page réactifs de base.
Copier le code

html,body {    
    height: 100%;}@media only screen and (min-width: 480px){    
        body {        
        background: yellow;    
}}
@media only screen and (min-width: 640px) and (max-width: 1024px) {    
    body {        
    background: green;    
}}
@media screen and (min-width: 1024px){    
    body {        
    background: blue;    
}}

Principe du plug-in

Ensuite, vous devez comprendre l'idée d'implémentation derespond.js :
La première étape consiste à supprimer tous les chemins de fichiers CSS introduits en externe dans le head et à les stocker dans un tableau
 ; La deuxième étape consiste à parcourir le tableau et à envoyer les requêtes AJAX une par une
; Étape 3 : Après le rappel AJAX, analysez la syntaxe min-width et max-width de la requête multimédia dans la réponse (notez que seules min-width et max-width sont prises en charge) et analysez le bloc CSS correspondant à la fenêtre d'affichage. changer d'intervalle;
La quatrième étape consiste à utiliser le bloc CSS correspondant en fonction de la fenêtre d'affichage actuelle lors de l'initialisation de la page et de window.resize.

Conclusion principale

À ce stade, sur la base des idées de mise en œuvre de base, vous pouvez faire attention à certaines choses lors de l'écriture du code :
1. Vous devez démarrer le serveur local (localhost) et vous ne pouvez pas utiliser l'adresse URL locale ordinaire (commençant par file://
) ; 2. Les fichiers CSS doivent être importés en externe et l'écriture de styles CSS avec style n'est pas valide
 ; 3. Étant donné que le plug-in de réponse recherche les fichiers CSS et les traite ensuite, le fichier de réponse doit être placé après le fichier CSS
4. De plus, bien que cela puisse être réalisé en plaçant le répondeur dans la tête ou derrière le corps, il est recommandé de le placer dans la tête (les raisons spécifiques sont mentionnées dans les conseils du document ci-dessous)
5. Il est préférable de ne pas définir l'encodage utf-8 pour CSS et d'utiliser l'encodage par défaut (voir la section des invites du document ci-dessous pour plus de détails)

Invites du document

Quelques conseils tirés de la documentation officielle :
1. Plus tôt vous introduisez le fichier respons.js, plus vous risquez d'éviter l'écran de démarrage qui apparaît sous IE.
2. Les requêtes multimédias imbriquées ne sont pas prises en charge
3. Le codage des caractères utf-8 a un impact sur le fonctionnement du fichier respons.js
Texte original officiel de l'API : si les fichiers CSS sont codés en UTF-8 avec Byte-Order-Mark, ils ne fonctionneront pas avec Respond.js dans IE7 ou IE8
. La signification fondamentale est la suivante : le codage des caractères des fichiers CSS au format utf-8 affectera le plug-in.
Mais lorsque j'utilise IE6-8 pour les tests, il peut être affiché normalement (que ce soit en ajoutant des paramètres de jeu de caractères dans le fichier CSS ou en ajoutant des paramètres de jeu de caractères dans la balise de lien). Par conséquent, la signification de ce bug de localisation n’est pas très claire.
4. Un écran de démarrage peut apparaître sur tous les domaines (pas encore testé, la situation spécifique est inconnue)

Démo d'instance

<!doctype html>
    <html>
        <head>
        <meta charset="UTF-8">
        <title>HTML5-响应式布局--respond.js-独行冰海</title>
        <link rel="stylesheet" href="test.css" charset="utf-8">
        <script src="respond.min.js"></script>
</head>
    <body>
        <p class="wrap" id="con">        
        让IE6~8支持响应式布局</p>
    </body>
</html>

Remarque : répondre Soit .min.js, soit répondre.src.js peuvent être utilisés, il suffit de le télécharger à partir de l'adresse de téléchargement indiquée ci-dessus. La partie CSS est la partie supérieure du code.
Effet d'affichage (l'effet d'affichage de IE6 et IE7-8 ne pose aucun problème, nous ne publierons donc pas les images ici) :

À étudier
Le contenu du document officiel n'a pas été clairement interprété (principalement, on ne sait pas comment l'appliquer)

<!-- Respond.js proxy on external server -->
<link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
<!-- Respond.js redirect location on local server -->
<link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
<!-- Respond.js proxy script on local server -->
<script src="/path/to/respond.proxy.js">
</script>

Autres plug-ins prenant en charge le responsive layout-css3-mediaqueries-js
Il n'y a pas de document officiel ou de démo pour css3-mediaqueries- js, par rapport à respond.js css3 -mediaqueries-js prend en charge presque toutes les syntaxes de requêtes multimédias. Un écran de démarrage apparaîtra. Il n'est pas recommandé de l'utiliser. Bien qu'il puisse prendre en charge toutes les requêtes multimédias, min-width et max-width peuvent en fait répondre à nos besoins de mise en page réactive.

Support CDN
Étant donné que IE9 supporte CSS3, vous pouvez directement ajouter une référence de script dans la balise head de la page HTML :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!