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

作者 : 开心源码 本文共6263个字,预计阅读时间需要16分钟 发布时间: 2022-05-12 共146人阅读

兼容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
    下载地址: 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的情况下,调使用此cssif(window.screen.width >= 1680) {    document.write('<link rel="stylesheet" href="../../css/oc_login_1920.css">');}// 分辨率小于等于1600的情况下,调使用此csselse { 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下
1920
1080&&chrome下截图
1920*1080&&chrome下.png


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

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

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 『前台开发』- 兼容IE8的响应式开发

发表回复