WEB响应式开发兼容IE6-8

css a'ゞ『完美』 3年前 (2016-05-18) 2147次浏览 已收录 0个评论 扫描二维码

响应式布局

今天来说说高大尚的响应式!

响应式的概念:简而言之,就是一个网站能够兼容多个终端(手机,电脑,平板等等)而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。

优点和缺点

优点:

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

开发者的工作量在一定程度上减少了

缺点:

响应式需要良好的设计,如果设计的不太好,就会造成,兼容各种设备工作量大,效率低下

因为要适应多种设备,不可避免的需要隐藏一些元素,就会出现代码累赘

响应式的解决方案不一定就是好的,有些时候可能达不到需要的效果

准备工作:设置 meta 标签

首先我们在使用 Media 的时候需要先设置下面这段代码,来兼容移动设备的展示效果:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

这段代码的几个参数解释:

content=”IE=edge,chrome=1” ,IE=edge 就是让 IE 浏览器用最新的文档模式来解析页面,chrome=1 是启用一个框架“谷歌浏览器内嵌框架”,这是 IE 浏览器的一个插件,目的就是为了让 IE 可以使用谷歌的 Webkit 引擎。

我建议这么写,不管用户有没有装这个插件,万一真有人装了呢,是吧。

谷歌浏览器内嵌框架:谷歌浏览器内嵌框架

详细情况请看这里:IE 文档模式

viewport 的话,百度也有,我也不多说。

直接上代码

两种写法:

@media only screen and (max-width:800px) {
       body{background:#000;}
}

 

<link rel="stylesheet" type="text/css" href="a.css" media="screen and (max-width:800px)" />

第一段段代码的是直接写在页面里面:效果是当页面最大的宽度为 800px 的时候,body 背景变为黑色。(这就是缺点,会有很多代码累赘,电脑看网页的时候也要加载手机的样式)

第二段代码的外部引入,只有在页面最大的宽度为 800px 的时才加载这段css。(这个方式如果网速不太好的话,加载速度慢的时候,页面会出现错位,或者闪屏)

其他详细的用法百度有,我就不说了。

兼容问题

支持的浏览器就不说了,大部分都支持。这里说不支持的 IE6-IE8。

解决办法已经有了:引入一段 js

 <!-- [if lt IE 9]>
       <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
       <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
 <![endif]-->

这种引入方式为 IE 注释,自己百度。

上面第一个 js 是让不支持 H5 的浏览器支持 H5,不支持的浏览器大家都知道,IE6-IE8,有一部分标签 IE11 都不支持,这里不多说。

第二个就是支持响应式的 js。

这里有些问题千万要注意:

要让这段 js 起作用,样式不能写在页面内部,必须使用 link 标签外部引入(要在这个 js 前面引入),还有必须用服务器环境访问页面,不能使用普通本地的 url 地址(file://开头)。

欢迎沟通交流~完美


a'ゞ『完美』版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明WEB 响应式开发兼容 IE6-8
喜欢 (12)
[]
分享 (0)
a'ゞ『完美』
关于作者:
一个前端小白菜
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址