语义化标签和media媒体查询可以放心使用
现在的高级浏览器都支持html5,只有IE6-IE8不支持。(下面说的IE均值IE6-IE8)
有两个特性在IE是可以使用的:
1、语义化标签:
header(头部) section(区块) footer(底部) nav(导航) dialog(弹出层) aricle(内容) aside(侧边栏) figure(放置图像、图表)
2、media媒体查询:
支持min-width和max-width,可以让IE也支持响应式布局。
让IE支持这两种特性的方法:
引入插件:html5shiv.js和respond.js
html5shiv.js是让IE浏览器支持html5新标签
(注意!最好引入库之后在css当中把这些语义化标签都设置成block,保证浏览器正常显示,article,aside,dialog,footer,header,section,nav,figure,menu{display:block});
respond.js是让IE浏览器支持media媒体查询
(注意!让IE浏览器支持meida是通过ajax实现的,只有在服务器环境下才能显示效果)
respond的原理:
第一步,将head中所有外部引入的CSS文件路径取出来存储到一个数组当中;
第二步,遍历数组,并一个个发送AJAX请求;
第三步,AJAX回调后,分析response中的media query的min-width和max-width语法(注意,仅仅支持min-width和max-width),分析出viewport变化区间对应相应的css块;
第四步,页面初始化时和window.resize时,根据当前viewport使用相应的css块;
判断浏览器:
在head中添加
<!--[if lt IE 9]>
<script src='html5shiv.min.js?v=2.141' type='text/javascript'></script>
<script src='respond.min.js?v=2.141' type='text/javascript'></script>
<![endif]-->
(注意!使用media时要让样式先加载,然后引入respond.js,才会有效)
最新文章
- EQueue性能测试计划
- [译]reset, checkout和revert
- MySQL启动错误排查
- 真正理解 git fetch, git pull 以及 FETCH_HEAD【转】
- js javascript:void(0) 真正含义
- GridView 无数据时,绑定提示
- Android 图片处理效果集
- eastcom——eclipse中运行vtmserver项目
- 06_Android中ArrayAdapter的使用
- unix下各种查看“变量”的命令比较
- HslCommunication组件库使用说明 (转载)
- 【转载】SQL语句用一个表的数据更新另一个表
- 初试 Entity Framework Core 的多对多映射
- python基础学习22----协程
- MySQL Sleep进程
- Codeforces 595D - Max and Bike
- java request获取各种数据
- brew faq:call ISHELL_GetJulianDate always return 1980 1 6
- curl传post数据流
- dm8148 开发只boot启动参数vram=128简介