前端开发那些事前端开发程序员

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

2018-09-07  本文已影响10人  Sakura_P

兼容IE8的响应式开发

全文概要：

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

常用解决方案

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

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

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


1600*900下的天猫登录页.png 
// 此方法兼容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 
@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呢？

px和em和rem的霸主位置

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

使IE8兼容rem

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

<!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

上一篇 下一篇

猜你喜欢

热点阅读