Partager le résumé d'apprentissage des requêtes multimédias en CSS3

Les requêtes multimédias en CSS3 sont souvent utilisées pour créer des pages de conception réactive frontale. Nous partageons ici un résumé d'apprentissage des requêtes multimédias en CSS3, y compris des solutions aux problèmes de compatibilité dans IE8. Les amis dans le besoin peuvent s'y référer

<.>

1. Attributs pris en charge par les requêtes multimédias

2. Combiner plusieurs requêtes de média non - pour exclure un type de média spécifié uniquement - pour spécifier un type de média spécifique
3. Exemples de styles de citation

<link rel="stylesheet" media="all" href="style.css" />   
<link rel="stylesheet" media="screen and (min-width:980px)" href="desktop.css" />   
<link rel="stylesheet" media="screen and (min-width:768px) and (max-width:980px)" href="pad.css" />   
<link rel="stylesheet" media="screen and (min-width:480) and (max-width: 768px)" href="phone.css" />   
<link rel="stylesheet" media="screen and (max-width:320px)" href="small.css" />

4. Exemple de style en ligne

@media screen and (min-width: 980px) {   
    //css code
}   
@screen and (min-width:768px) and (max-width:980px) {   
    //css code
}   
@screen and (min-width:480) and (max-width: 768px) {   
    //css code
}   
@screen and (max-width:320px) {   
    //css code
}   

@media screen and (max-device-width: 480px) {   
    //max-device-width等于480px
}   
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) {   
    //设备宽高比   
}   
@media all and (orientation:portrait) {   
    //竖屏   
}   
@media all and (orientation:landscape) {   
    //横屏   
}

5. Problèmes de compatibilité I8

Source du problème : Le média est utilisé dans le fichier CSS du projet pour ajuster automatiquement la mise en page en fonction de la taille de la fenêtre. Cependant, les versions IE8 et inférieures ne le font pas. prend en charge les requêtes multimédia CSS3, c'est-à-dire que le code CSS dans l'écran @media et (largeur maximale : 900 px) n'est pas exécuté,

@media screen and (max-width: 900px) {   
  ...   
}

Ce quoi dois-je faire ? De nombreuses personnes sur Internet ont proposé des solutions. La méthode la plus simple est :
IE8 et les navigateurs précédents ne prennent pas en charge les requêtes multimédias CSS3. Vous pouvez ajouter css3-mediaqueries.js à la page pour résoudre ce problème.

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Il s'avère que c'est assez simple, mais le résultat est très décevant Peu importe la façon dont je l'ai essayé dans le projet, cela n'a pas fonctionné. Cela ne fonctionne pas. J'espère que les collègues qui l'ont essayé pourront me donner des conseils. Je n'ai pas d'autre choix que d'utiliser une autre méthode légèrement plus compliquée, que j'ai également apprise sur Internet. Il y a deux problèmes à considérer ici. L'un est que seul IE8. et les versions inférieures peuvent le faire, et l'autre est que seuls les navigateurs peuvent être réduits à ce traitement n'est effectué qu'après une certaine plage de taille. La méthode est la suivante :
Principe : Utilisez jquery si vous ne le comprenez pas, sachez simplement comment l'utiliser. Modifiez ensuite le fichier CSS correspondant dans le html si nécessaire.

Solution :

Ajoutez. ce qui suit après le fichier js commun pour toutes les pages. Code :

/*Adjust the layout in IE8 and lower than IE8 when the browser is narrow*/
function processLowerIENavigate()   
{   
   var isIE = document.all ? 1 : 0;   
   if (isIE == 1)   
   {   
       if(navigator.userAgent.indexOf("MSIE7.0") > 0 || navigator.userAgent.indexOf("MSIE 8.0") > 0)   
       {     
    //  var doc=document; 
           var link=document.createElement("link");   
           link.setAttribute("rel", "stylesheet");   
           link.setAttribute("type", "text/css");   
           link.setAttribute("id", "size-stylesheet");   
           link.setAttribute("href", "");   

           var heads = document.getElementsByTagName("head");   
           if(heads.length)   
               heads[0].appendChild(link);   
           else
               document.documentElement.appendChild(link);   

           document.write("<script type=&#39;text/javascript&#39; src=&#39;jquery.min.js&#39;></script>");   
           document.write("<script type=&#39;text/javascript&#39; src=&#39;media_screen.js&#39;></script>");   

       }   
   }    
}   
var lowerIE8 = processLowerIENavigate();   

media_screen.js文件内容如下，直接从网上copy：   
function adjustStyle(width) {   
    width = parseInt(width);   
    if (width < 902) {   
//alert("<900");
//alert(width);
        $("#size-stylesheet").attr("href", "navigateLowerIE8.css");   
    } else {   
      // alert(">900");
  //alert(width);
       $("#size-stylesheet").attr("href", "");    
    }   
}   

$(function() {   
    adjustStyle($(this).width());   
    $(window).resize(function() {   
        adjustStyle($(this).width());   
    });   
});

navigateLowerIE8.css est la mise en page d'IE8 et d'autres navigateurs de version inférieure lorsque ils sont réduits. OK, tout est bel et bien fait.

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!