IE browser is not compatible with CSS media query solution

【Foreword】

       When I explained responsive layout before, I just gave a few simple examples. After that, the BootStrap framework will be explained directly. Due to time problems, the compatibility is not introduced. Recently, another classmate found that IE does not support media query @media after testing. I will record this here and summarize the solution to the incompatibility of IE browser with CSS media query.

 

【question】

      Considering that under different resolutions, website pages can still be displayed consistently, in addition to being controlled by js, css media query is more convenient, but the pain point is that ie8 does not support it.

 

【think】

       First of all, let's test the situation of BootStrap under IE. After the test, we found that it can support responsive layout normally. So why is BootStrap okay? Those who often use BootStrap can find that the Respond.js file is introduced in Bootstrap, which is adaptive and compatible from the name. It is this script that makes IE6-8 support CSS3 Media Query

       The CDN of respond.js can be found online, I wrote it here, just open and copy:

    Version 1.4.2:

 

<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    After the introduction, open IE and see, you will find that the adaptive effect is very good. Therefore, Respond.js allows browsers that do not support css3 Media Query, including other browsers such as IE6-IE8, to support query.

 

 

【solution】

      We can solve it through the respond.js library, the principle of this plugin is very simple

 

[Plug-in principle]

       Need to understand the implementation ideas of respond.js:

       The first step is to take out all the externally introduced CSS file paths in the head and store them in an array;

       The second step is to traverse the array and send AJAX requests one by one;

       The third step, after the AJAX callback, analyze the min-width and max-width syntax of the media query in the response (note that only min-width and max-width are supported), and analyze the corresponding css block corresponding to the viewport change interval;

       The fourth step, when the page is initialized and window.resize, use the corresponding css block according to the current viewport

 

【Core Theory】

         From this, you can get some points to pay attention to when writing code according to the basic implementation ideas:

   1. The local server (localhost) needs to be started, and the ordinary local url address (starting with file://) cannot be used;

   2. It is necessary to import CSS files externally, and it is invalid to write CSS styles in styles ;

   3. Since the respond plugin searches for the CSS file and then processes it, the respond file must be placed after the CSS file

   4. In addition, although the response can be placed in the head or behind the body, it is recommended to be placed in the head (the specific reasons are mentioned in the document prompt below)

   5. It is best not to set utf-8 encoding for CSS, use the default (see the documentation tips below for the reasons)

 

【Documentation Tips】

      Some hints in the official documentation:

   1. The earlier the respond.js file is introduced, the more likely it is to avoid the splash screen that appears under IE.

   2. Nested media queries are not supported

   3. The character encoding of utf-8 has an impact on the operation of the respond.js file

         官方API原文：if CSS files are encoded in UTF-8 with Byte-Order-Mark, they will not work with Respond.js in IE7 or IE8.

         The basic meaning is: the character encoding of CSS files in utf-8 format will affect the plugin.

        But when I use IE6-8 for testing, it can be displayed normally (whether it is to increase the charset setting in the css file or increase the charset setting in the link tag). So, it's not too clear what this location bug means.

   4. There may be a splash screen across domains (not tested yet, the details are unknown)

 

【Other plugins】

   Other plugins that support responsive layout - css3-mediaqueries-js

   There are no official documents and demos of css3-mediaqueries-js. Compared with respond.js, css3-mediaqueries-js supports almost all the syntax of media query. A splash screen will appear. It is not very recommended, although it can support all mediaqueries, but min-width and max-width can actually meet our needs for responsive layout.

 

【Notice】

   I found a bug when I was working on a project recently: it affects respond.js due to the @ symbol in the animation @keyframe

 

 

.