A method for enabling IE6/7/8 to support media query responsive design

Using different CSS declarations under different browser widths, the common scenario is to use media query, but this scenario does not support IE9 the following browsers.

The more popular foreign UI framework Bootstrap V3 version uses media query technology to implement the grid layout, but to be compatible with IE8, (IE6/7 is not as high as China, so not compatible) need to introduce respond.js scheme.

The principle of this scheme is divided into the following 4 steps:

1, after the style link, load respond.js, the script will get before he appeared in the link node to an array

2. Send Ajax request to retrieve the text content of CSS file in link array

3. Recalculate and apply related styles by analyzing @media class declarations in text content

4, when window.resize, trigger the 3rd step logic

There are two problem points here:

1. Will the 2nd step cause duplicate request consumption?

2, if the CSS static resource storage domain name and the current page is different, bound to encounter the limitations of JS homologous policy, how to break through cross-domain issues?

Question 1 better answer, basically including IE, all browsers will cache the GET request, because in the 1th step when the browser has requested all the CSS files, so in the 2nd step Ajax will use the local cache directly, will not cause performance loss. However, due to the need to reference a respond.proxy.gif to hack the IE path problem, it may cause an additional request loss.

Problem 2 does exist, respond.js through the IFRAME proxy file scheme to break through the homologous strategy, detailed explanation can refer to this article "Respond.js Let ie6-8 support CSS3 Media Query" or Baidu related JS cross-domain knowledge. However, there are two problems in the Respond.js scenario:

1, because the creation of the IFRAME is asynchronous, Respond.proxy.js can not block rendering, will inevitably cause the page style flashing (the default style is applied first, the 3rd step style analysis is finished, and then reapply the style)

2, because the IFRAME proxy file when the CSS resource request completes the event can not be actively callback (child IFRAME can not access the non-homologous parent window), but through the parent window of a timer constantly read the child window Window.name value to achieve passive communication, Therefore, there is a further delay in rendering the style.

If the use scenario does not receive the negative impact of issue 2 (a sentiment front-end engineer deploys static resources to a separate domain name to improve the performance of the Web page and does not accept a noticeable redraw of the experience loss), other scenarios need to be considered (another respond.js The project author has not been maintained for several years, and some bugs have not been fixed yet. This paper radiates a solution based on SASS + JS, for reference. Ideas are as follows:

1, usually the resolution width of the screen is in line with certain specifications, and the PC-side site grid layout of the common width can be poor lifting: 1024px, 1280px, 1440px, 1600px, 1920px

2, in the style, for different browser width, we can make more than one style rule, such as body{},. w1280px body{},. w1440px body{}, to achieve personalized purpose

3, when window.resize, dynamic on the HTML node to change the preset width className, such as width = 1620px, to meet width > 1600px && width < 1920 PX, so Html.classList.add (' w1600px ')

The above method is very intuitive, IE6/7/8 using the above scenario, other media query-enabled browsers use @media only screen and (min-width:1620px) CSS style scheme. For style maintainability issues (writing a big lump of @media and. w1440px body, the same style is certainly not conducive to maintenance), we SASS mixin to solve, the specific code reference the following styles:

@mixin mediawidth ($min-width:1024px, $max-width:null){$widthSet:(1024px, 1280px, 1440px, 1600px, 1920px);$selector: ();@if $max-width {@media only screens and (min-width:$min-width) and (max-width: $max-width) {@content; }} @else{@media only screen and (Min-width:$min-width) {@content; }} @each $item in $widthSet{@if $max-width {@if $item >= $min-width and $item < $max-width {$selector :Append ($selector, unquote ('. w#{$item}& '), ' comma '); }} @else{@if $item >= $min-width{$selector:Append ($selector, unquote ('. w#{$item}& '), ' comma '); }        }    }    #{$selector}{@content; }}body{width:1024px;Background-color:Red;@include mediawidth (1024px) {width:1024px;Background-color:Orange; }@include mediawidth (1280px, 1440px){width:1280px;Background-color:Green; }@include mediawidth (1600px){width:1600px;Background-color:Blue; }}

The above SASS compiled CSS is:

Body{width:1024px;Background-color:Red;}@media only screen and (min-width:1024px){Body {width:1024px;Background-color:Orange; }}.w1024px body,. w1280px body,. w1440px body,. w1600px body,. w1920px Body{width:1024px;Background-color:Orange;}@media only screen and (min-width:1280px) and (max-width:1440px){Body {width:1280px;Background-color:Green; }}.w1280px Body{width:1280px;Background-color:Green;}@media only screen and (min-width:1600px){Body {width:1600px;Background-color:Blue; }}.w1600px body,. w1920px Body{width:1600px;Background-color:Blue;}

Question one: What if I don't use SASS in my project?

From the actual project experience, the introduction of SASS can greatly improve the maintenance of the style file, and will not have any impact on the front-end project process, because you can directly use the Editor's compilation tool to save the file synchronously compiled CSS files, such as sublime text SASS build and Build on the Save plugin, not to mention tools like sass command line, Compass, grunt, gulp, etc.

Question two: What if I don't SASS?

Learning is, look at this to know how simple the Sass usage guide.

For the above code example, see this demo:http://yekai.net/demo/ie-media-query.html

A method for enabling IE6/7/8 to support media query responsive design