zoukankan      html  css  js  c++  java
  • 语义化标签和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,才会有效)

  • 相关阅读:
    java项目启动报Unsupported major.minor version 51.0错
    eclipse启动报错
    使用ftp加IP上传文件
    Java替换中使用正则表达式实现中间模糊匹配
    使用Tomcat安装版启动项目
    java文件流操作
    mybatis所需pom文件内容以及配置文件
    个人写spark小测试
    spark介绍2
    RDD介绍与执行
  • 原文地址:https://www.cnblogs.com/duanlianjiang/p/7204355.html
Copyright © 2011-2022 走看看