『前端开发』- 兼容IE8的响应式开发

作者: Sakura_P | 来源:发表于2018-09-07 00:22 被阅读10次

兼容IE8的响应式开发

全文概要：

1. 常用解决方案
2. 使IE8兼容媒体查询 @media
3. px和em和rem的霸主位置
4. 使IE8兼容rem

常用解决方案

所谓响应式开发，就是指在不同的系统，设备环境，不同的分辨率下，界面进行不同的响应和调整适配

我们简单理解为，在不同的浏览器上，不同分辨率的显示器上，我们的网页能进行自适应响应调整，使得最后的界面还是能达到设计师高保真图的效果。
在PC端开发中，经常会出现系统得兼容IE8的要求，此次我们讨论的是在这种需求下，如何达到所谓的响应式开发的要求。
常用的响应式开发解决方案（针对兼容IE8的大前提下）有：

定宽法
天猫登录页采用的方法是定宽法，即设定一个最小宽度min-width:1190px，浏览器小于这个宽度则出现横向滚动条，如果大于这个宽度，则设置margin:auto使其自动左右居中。
这样的好处是省事，兼容性也好，但是缺陷就是在小屏幕分辨率时，某些元素会变得比较大，有些突兀。即可能会出现不满足于设计图的比例的情况。元素在屏幕中Y轴的位置也会变化。
1920 * 1080下的天猫登录页截图
1920*1080下的天猫登录页.png

1600 * 900下的天猫登录页截图

1600*900下的天猫登录页.png

媒体查询 + 引用多CSS法
让IE8兼容媒体查询，即@media的方法在这先卖个关子，稍后我们会一一道来。
此方法的思路就是首先判断当前的屏幕分辨率或屏幕宽度，然后对于需求所要适配的分辨率分别加载不同的CSS。
在这些不同的CSS中，我们可以按比例实现设计图的需求，可以完美实现不同的分辨率下都达到设计图中的比例效果，元素在屏幕中的X轴和Y轴的位置也不会变化。但是缺陷也有，因为这里的网页的解析流程是先解析一些公共的CSS样式，在执行脚本判断屏幕分辨率，再进行加载相对应的CSS文件，与此同时，解析树可能已经开始解析DOM结构了，就可能会造成闪屏的结果（当然，也不一定会出现，我就没有出现0.0）。所以问题就是会影响页面的响应时间，但是这也有相应的解决方案，那就是服务端渲染，服务端判定发送请求的系统环境和屏幕分辨率等，来加载不同的CSS样式表和JS脚本。但这不是本文的重点，有兴趣的同学可以自行探索哈！

// 此方法兼容IE8
// 分辨率大于等于1680，大部分为1920的情况下，调用此css
<script>
    if(window.screen.width >= 1680) {
        document.write('<link rel="stylesheet" href="../../css/oc_login_1920.css">');
    }
    // 分辨率小于等于1600的情况下，调用此css
    else {
        document.write('<link rel="stylesheet" href="../../css/oc_login_1600.css">');
    }
</script>

1920 * 1080下的登陆页截图

1920*1080下的登陆页.png

1600 * 900下的登陆页截图

1600*900下的登陆页.png

媒体查询 + em/rem法
此方法的奥义有些与上面的多CSS法类似，不过用了此方法的同学就会鄙视多CSS法的重复劳动的愚蠢了，因为这个方法用一个CSS就可以了，只不过宽度、高度等属性单位得从px改为em或rem。
咦，你可能已经意识到了W3C不是从小教我们rem不兼容IE8的吗！那我们怎么用rem啊！
答曰：照用，用点hack科技就好啦
0.0如果你好像都不知道em和rem是啥，emmmmm，往下滑滑，看了 px和em和rem的霸主位置 你就知道啦！

@media screen and (max-width: 1600px) {
    html {
        color: brown;
        font-size: 100%;
    }
}

@media screen and (min-width: 1601px) {
    html {
        color: blueviolet;
        font-size: 200%;
    }
}

//rem
.box {
    margin: 2rem;
}

//em
.box {
    margin: 2em;
}

1920 * 1080下的巨丑Demo页截图

1920*1080下的巨丑Demo.png

1600 * 900下的巨丑Demo页截图

1600*900下的巨丑Demo.png

使IE8兼容媒体查询 @media

所谓媒体查询，就是针对不同的屏幕尺寸设置不同的样式，在响应式设计中，是非常有用的。

使用@media，在重置浏览器大小的过程中，页面会根据浏览器的宽度和高度重新渲染页面。
通常，我们只用到它的min-width和max-width属性，这里，我们也是。
但是可惜的是IE9才开始支持@media，其他主流浏览器早已支持，如何在IE8中也能使用@media呢？

hack科技之respond.js
下载地址：https://github.com/scottjehl/Respond.git
respond.js使IE6-8能够支持@media的min-width和max-width属性
使用需知：
- 该脚本不依赖于任何库或框架，压缩后大小为1kb左右
- 该脚本不解析@import导入的CSS和内联写在<style>里的CSS，所以建议使用<link>引入CSS
- 该脚本可能会不支持file:// url，该HTML得运行在web 服务器上
  什么意思呢，同一个文件在IE8中打开，在http://127.0.0.1:8020/HelloHBuilder/Demo.html这种运行在web服务器上的就能够正常使用该脚本，但是直接本地打开HTML，D:\HBuilderProject\HelloHBuilder\Demo.html类似这样的文件地址，该脚本就会报错，拒绝访问。
- CSS脚本建议不要设成UTF-8，否则在IE7/8中可能会出现错误（我测试了一下，我这没有出现），并且数量不要超过32个，否则IE会报Invalid procedure call or argument错误。
- 该脚本不支持Sass的source maps(生成文件到源文件的映射)
- 不支持嵌套的媒体查询
工作原理：
- 该脚本首先通过Ajax请求遍历所有外部链接的CSS文件，并解析文本响应，在其内容上通过正则表达式来找到与媒体查询相关联的CSS块，并根据他们的min-width和max-width与当前浏览器宽度进行比较，启用和禁用相关的样式代码，接着按顺序将这些包含@media的CSS块附加到头部。
测试Demo：
```
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML5-响应式布局--respond.js-Sakura</title>
        <link rel="stylesheet" href="test.css" charset="utf-8">
        <script src="js/respond.min.js"></script>
    </head>
    <body>
        <div>
            使IE6~8支持响应式布局——Sakura
        </div>
    </body>
</html>
```
CSS文件：
```
html,
body {
   height: 100%;
}

@media only screen and (min-width: 480px) {
  body {
      background: blanchedalmond;
  }
}

@media only screen and (min-width: 640px) and (max-width: 1024px) {
   body {
       background: gray;
   }
}

@media screen and (min-width: 1024px) {
   body {
       background: coral;
   }
}
```

旧瓶新酒的window.screen.width
直接通过判断window.screen.width的大小，来执行不同的样式代码。此方法也兼容IE8

//此方法兼容IE8
// 分辨率大于等于1680，大部分为1920的情况下，调用此css
if(window.screen.width >= 1680) {
    document.write('<link rel="stylesheet" href="../../css/oc_login_1920.css">');
}
// 分辨率小于等于1600的情况下，调用此css
else {
 document.write('<link rel="stylesheet" href="../../css/oc_login_1600.css">');
}

px和em和rem的霸主位置

在前端开发中，我们常用的长度单位有px,em,rem等，虽然都是相对单位，但由于参照物不同，各自特性也不同。

px是一个相对于屏幕分辨率的像素长度单位。比较稳定和精确，但是缺点也是此，在不同分辨率下的响应式效果不好。但元素字体大小还是推荐使用px，因为点阵显示缘故，某些数字17px等可能会出现让字体出现锯齿等显示不友好的情况。但是不得不说，这是目前国内前端开发使用最多的长度单位，兼容性完美。
em是一个相对于父元素的字体大小(font-size)单位。特点是不是一成不变的，而是相对于父元素的font-size值变化而变化，如果父元素没有设置font-size的值，则向上继续寻找父元素的父元素的font-size，直到跟元素为止。浏览器默认的font-size都为16px，通常别人会建议你设为font-size: 62.5%，如此一来基础值font-size就变为10px，即10px = 1em，但是！你得chrome不能设置小于12px的font-size，当你设置小于12px时，chrome都以font-size: 12px呈现。所以使用起来会存在一些烦恼，解决方案是，首先我们一般都会在body{}下设置font-size的值，但是如果我们要使用的em单位的元素已经被父级元素或者爷爷辈的人设置font-size大小污染，那我们就在父元素重新设置font-size值为基础值，实在不行，只有按照父元素的font-size比例重新算一次。
rem是一个相对于根元素<html>的字体大小(font-size)单位。这是一个集于px精神和em优点于一身的单位，因为它是相对于根元素<html>里的font-size而变的单位，不会像em因为复杂的伦理关系而被干扰，所以在不同的分辨率上的设备中也可以体现稳定性，然后又具备响应性。听起来真美好，但是但是！这哥们兼容性还不够啊，从IE9开始部分兼容，直到IE11才开始完全兼容，这与我们兼容IE8的出发点差了一点点啊。通常大家使用rem的时候，如果需要提高兼容性，就会同时使用px和rem两个单位，先写px再写rem，如果浏览器支持rem，则rem会将先前的px给覆盖，不支持也有默认的px可以支持，但是这样子IE8的响应性也泡汤了。但是脑洞大一些，如果我不是使用px和rem而是同时使用em和rem，世界会不会有什么不一样？

使IE8兼容rem

既然rem这么美好，IE8却不能使用，这很难受啊！别慌，接下来我们就来让IE8也能兼容rem。

hack科技之rem.js
rem.js是一款让IE8以下的浏览器都兼容rem属性的脚本，其原理是一旦判断当前浏览器不支持rem，该脚本就读取所有的外部链接CSS，并使用正则来查找使用了rem的元素，然后将这些使用了rem的地方重新计算为px，并将其写入head中，在内联中重写覆盖。
使用需知：
1. 在所有CSS文件引用之后引用rem.js，并在<body>标签的末尾引入rem.js。
2. 当你想rem.js跳过一些样式表，只需将data-norem作为属性添加到要忽略的CSS文件的link引入上。值得一提的是，这个忽略效果只会在IE8上有效果，为什么呢？因为之后的浏览器都开始兼容rem了啊哈哈哈哈。
demo

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>

        <link rel="stylesheet" href="remDemo.css">
        <!--以下的css文件在IE8浏览器中会被rem.js忽略-->
        <!--其他浏览器中依旧会显示，因为其他浏览器支持rem！-->
        <link rel="stylesheet" type="text/css" href="test.css" data-norem />

        <script src="js/html5shiv.min.js"></script>
        <script src="js/respond.min.js"></script>
        <!--        <script src="js/jquery-1.8.3.min.js"></script>-->
    </head>

    <body>
        <div class="box">
            <p class="title">欢迎来到主界面
                <p class="content">这里是叮叮咚咚</p>
            </p>
            <ul>
                <li>
                    <label>姓名</label>
                    <input type="text" class="name" />
                </li>
                <li>
                    <label>姓名</label>
                    <input type="text" class="password" />
                </li>
            </ul>
        </div>

        <script src="js/rem.min.js" type="text/javascript"></script>
    </body>

</html>

test.css文件

html,
body {
    height: 100%;
}

@media only screen and (min-width: 480px) {
    body {
        background: blanchedalmond;
    }
}

@media only screen and (min-width: 640px) and (max-width: 1024px) {
    body {
        background: gray;
    }
}

@media screen and (min-width: 1024px) {
    body {
        background: coral;
    }
}

li label {
    font-size: 2rem;
    margin-left: 4rem;
}

remDemo.css文件

@media screen and (max-width: 1600px) {
    html {
        color: brown;
        font-size: 200%;
    }
}

@media screen and (min-width: 1601px) {
    html {
        color: blueviolet;
        font-size: 400%;
    }
}

.box {
    margin: 2rem;
}

.title {
    margin: 2rem;
    font-size: 4rem;
}

.content {
    //margin-top: 8rem;
    font-size: 2rem;
}

input {
    margin-top: 1rem;
}

19201080&&IE8下截图

1920*1080&&IE8下
19201080&&chrome下截图

1920*1080&&chrome下.png

至此，关于兼容IE8的响应式开发已经全部结束了！撒花撒花撒花~
如图小伙伴有疑问或者不知道那些js文件去哪里下载（去github上！！！按名字搜索！），emmmm，实在没办法可以留言或邮箱M我，（应该）第一时间将这些文件发回给小伙伴的！
【我的邮箱->】sakura_p@qq.com

技术开源，码文不易，请尊重原创，本文首创于https://www.jianshu.com/u/20def6159683

『前端开发』- 兼容IE8的响应式开发

兼容IE8的响应式开发

全文概要：

常用解决方案

使IE8兼容媒体查询 @media

px和em和rem的霸主位置

使IE8兼容rem

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端开发那些事

前端开发

程序员

web前端开发

!…~