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

时间  2019-11-16
标签 前端开发 兼容 ie8 响应 开发 栏目 浏览器 繁體版
原文   原文链接

兼容IE8的响应式开发

全文概要：

1. 经常使用解决方案javascript

2. 使IE8兼容媒体查询 @mediacss

3. px和em和rem的霸主位置html

4. 使IE8兼容rem前端

经常使用解决方案

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

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

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

1600 * 900下的天猫登陆页截图 jquery

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下的登录页截图 git

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页截图 github

1920*1080下的巨丑Demo.png
1600 * 900下的巨丑Demo页截图
1600*900下的巨丑Demo.png

使IE8兼容媒体查询 @media

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

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

  • hack科技之respond.js 下载地址：github.com/scottjehl/R… 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是一个相对于根元素的字体大小(font-size)单位。这是一个集于px精神和em优势于一身的单位，由于它是相对于根元素里的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，并在标签的末尾引入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

技术开源，码文不易，请尊重原创

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程