IE浏览器支持响应式网站设计
目前响应式网站设计比较流行, 下面是摘自百度百科有关响应式设计的定义.
响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。
但是, 响应式设计并不能原生态支持IE8及一下的浏览器, 而IE浏览器目前的使用率仍然比较高(30%左右), 所以, 兼容老的IDE浏览器还是很有必要.
下面说如何让老的IE浏览器支持响应式网站设计.
<head>
<!-- some css style here -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
官方建议将respond.min.js的引入放在所有的css style引入之后, 所以, 一般就放到<head>标签最后即可.
附--常用判断说明:
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->
| 项目 | 范例 | 说明 |
|---|---|---|
| ! | [if !IE] | The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression. NOT运算符。这是摆立即在前面的功能，操作员，或子表达式扭转布尔表达式的意义。 |
| lt | [if lt IE 5.5] | The less-than operator. Returns true if the first argument is less than the second argument. 小于运算符。如果第一个参数小于第二个参数，则返回true。 |
| lte | [if lte IE 6] | The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument. 小于或等于运算。如果第一个参数是小于或等于第二个参数，则返回true。 |
| gt | [if gt IE 5] | The greater-than operator. Returns true if the first argument is greater than the second argument. 大于运算符。如果第一个参数大于第二个参数，则返回true。 |
| gte | [if gte IE 7] | The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument. 大于或等于运算。如果第一个参数是大于或等于第二个参数，则返回true。 |
| ( ) | [if !(IE 7)] | Subexpression operators. Used in conjunction with boolean operators to create more complex expressions. 子表达式运营商。在与布尔运算符用于创建更复杂的表达式。 |
| & | [if (gt IE 5)&(lt IE 7)] | The AND operator. Returns true if all subexpressions evaluate to true AND运算符。如果所有的子表达式计算结果为true，返回true |
| | | [if (IE 6)|(IE 7)] | The OR operator. Returns true if any of the subexpressions evaluates to true. OR运算符。返回true，如果子表达式计算结果为true。 |
IE浏览器支持响应式网站设计的更多相关文章
- 响应式网站设计(Responsive Web design)
页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.具体的实践方式由多方面组成,包括弹性网格和布局.图片.CSS media query的使用等.无论用 ...
- Responsive Design响应式网站设计心得笔记
这个词已经喊了很久了,一直都是小打小闹,没正经的做过大的响应式全站,这次终于有机会了.网站刚上线半个月,就要改版为响应式设计,支持手机/PC等各类终端显示浏览.今天把首页做好,并测试无误,这里把一些应 ...
- 响应式网站设计---Bootstrap
响应式布局可以帮助我们实现网站布局随屏幕大小自动调整的需求,实现不同屏幕分辨率的终端上浏览网页的不同展示方式,使得网页在PC端和手机端均可以完美的展现其内容,具有自适应性. 使用基于Bootstrap ...
- 使用Quasar设计Material和IOS风格的响应式网站
使用Quasar设计Material和IOS风格的响应式网站 栏目: CSS · 发布时间: 8个月前 来源: segmentfault.com 本文转载自:https://segmentfaul ...
- HTML5、CSS3与响应式Web设计入门(2)
HTML5的宽泛含义开拓了Web开发的视野,增加了开发方案的多样性,同时也带给很多Web开发者不小的困惑,就是HTML5在涉及到Web某个应用领 域的开发时,到底代表了什么?本篇文章的目的就在于跟大伙 ...
- 最佳的 14 个免费的响应式 Web 设计测试工具
一旦你决定要搭建一个网站就应该已经制定了设计标准.你认为下一步该做什么呢?测试!我使用“测试”这个词来检测你网站对不同屏幕和浏览器尺寸的响应情况.测试在响应式网页设计的过程中是很重要的一步.如果你明白 ...
- 响应式Web设计(Responsive Web design)的理念
页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.具体的实践方式由多方面组成,包括弹性网格和布局.图片.CSS media query的使用等.无论用 ...
- 推荐35个新鲜出炉的响应式 Web 设计实例
响应式设计的准则在于根据用户使用的屏幕的分辨率来改变网站的的布局.因此,视频或图像的大小和文本的数量,可以被视为是一个明显的变化.让你即使从智能手机浏览一个网站的时候能轻松地看到网站上的重要内容.今天 ...
- IT兄弟连 HTML5教程 响应式网站的内容设计
基于响应式开发网站,除了页面的布局是我们设计的重点,网站中显示的图片和文字也是我们不能轻视的内容. 1 响应式图片显示内容设计 真正具有响应性的Web设计是完全调整网站以满足访问者的设备.我们需要在 ...
随机推荐
- HDU4812
树分治 求逆元请递推,不然会TLE 开桶记录即可 注意常数 # pragma comment(linker,"/STACK:102400000,102400000") # incl ...
- python3下Django2.0配置最新xadmin详解
1,打开pycharm,创建一个Django项目 2,安装Django,默认是最新版本,pip3 install -i https://pypi.douban.com/simple/ django 3 ...
- java操作impala
public class App { static String JDBC_DRIVER = "com.cloudera.impala.jdbc4.Driver"; static ...
- Redis进阶实践之十七 Redis协议的规范
一.介绍 Redis客户端使用称为RESP(Redis的序列化协议)的协议与Redis服务器进行通信. 虽然协议是专门为Redis设计的,但它可以用于其他客户端 - 服务器软件项 ...
- 29.Django session
session 1.概述 cookie和session的区别 Cookie是保存在用户浏览器端的键值对,Session是保存在服务器端的键值对:Cookie做用户验证的时,敏感信息不适合放在Cooki ...
- epoll 实现回射服务器
epoll是I/O复用模型中相对epoll和select更高效的实现对套接字管理的函数. epoll有两种模式 LT 和 ET 二者的差异在于 level-trigger 模式下只要某个 socket ...
- go学习（二）目录管理
1. go 环境变量 GOROOT golang 安装目录的绝对路径 GOPATH 工作目录(worksapce) GOBIN go install编译存放路径.不允许设置多个路径.可以为空.为空时则 ...
- hadoop2.x源码编译
转载请标明出处: http://blog.csdn.net/zwto1/article/details/50733753: 介绍 本篇主要会涉及以下内容: 学会编译hadoop2.x源码 编译hado ...
- [转]【安卓笔记】AsyncTask源码剖析
[转][安卓笔记]AsyncTask源码剖析 http://blog.csdn.net/chdjj/article/details/39122547 前言: 初学AsyncTask时,就想研究下它的实 ...
- 记录使用微信小程序的NFC和蓝牙功能读取15693芯片的开发历程
开发目标: (1) 对于Android手机,直接通过微信小程序调用手机的NFC功能,对15693协议的芯片进行读写操作: (2)对于苹果手机(及没有NFC模块的手机),通过微信小程序的蓝牙功能连接到蓝 ...