html媒体查询是什么(h5媒体查询)

　　1. Respond.min.js

　　我们在写页面时，经常会碰到页面在电脑端自适应的页面，并且要求兼容到IE8浏览器，因为是自适应的页面，所以我们会用到Media Query,

　　即: “@media(max-width:1200px){},” 但是这个属性在IE8浏览器以及IE8以下是不支持的，这时我们可以加载一个js文件,使 IE8以及IE8以下版本也支持Media Query属性; 即：

　　Respond.min.js是一个快速、轻量的js文件，

　　用于为IE6-IE8以及其他不支持CSS3 Media Queries的浏览器提供媒体查询的min-width 和max-width特性，实现响应式的网页设计。

　　其中Media Query 的兼容性如下:

　　使用方法：引入respond.min.js，但要在css的后面(越早引入越好，在IE下面看到页面闪屏的概率越低，因为做出css会先渲染出来，如果respond.min.js的加载的很后面，这是重新根据media Query解析出来的css会再改一次页面的布局)

　　<!--[if lt IE 9]>

　　< src="js/respond.min,js"></>

　　<![endif]-->

　　其中：“<!--[if lt IE 9]>”是“html if条件注释”它的含义是当IE浏览器版本小于IE9浏览器版本时，就运行这个js文件，否则就不运行这个js文件(比如：在chorme浏览器下是不识别的)

　　2. Htmlif条件注释

　　<!--[if !IE]><!-->除IE浏览器外都可识别<!--<![endif]-->

　　<--[if IE]>所有IE可识别<![endif]-->

　　<--[if IE6]>仅IE6可识别<![endif]-->

　　<--[if lt IE6]>IE6以及IE6以下版本可识别<![endif]-->

　　<--[if gte IE6]>IE6以及IE6以上版本可识别<![endif]-->

　　<--[if lt IE9]>IE9以及IE9以下版本可识别<![endif]-->

　　项目

　　范例

　　说明

　　lt

　　<!--[if lt IE 9]>

　　小于运算符,IE9及以下版本都可识别

　　gt

　　<--[if gt IE6]>

　　大于运算符，IE6及以上版本都可识别

　　!

　　<!--[if !IE]>

　　not运算符，除IE外都可识别

　　注意：图中标识的红线是空格，必须严格按照这个样式来写，否则ie9上会出现显示这些字符：

　　3. html5shiv.min.js

　　我们在写页面时，html5的新增标签在IE9以下的版本是不识别的，所以在IE8以及以下的版本内容是错乱的，解决方案是加载一个js文件，可以让html5的新增标签在ie8以及以下也能正常显示。

　　用于解决IE9以下版本的浏览器对HTML5新增标签不识别，并导致css不起作用的问题。

　　<!--[if lt IE 9]>

　　< src="js/html5shiv.min.js"></>

　　<![endif]-->

　　其中html5新增的标签有：<article>、<aside>、<audio>、<bdi>、<canvas>、<command>、<datalist>、<details>、<embed>、<figcaption>、<figure>、<footer>、<header>、<keygen>、<mark>、<meter>、<nav>、<output>、<progress>、<rp>、<rt>、<ruby>、<section>、<source>、<summary>、<time>、<track>、<video>、<wbr>

　　4. CSS3个浏览器兼容问题

　　注意：1. Css3选择器的兼容情况

　　l first-child 兼容到IE8+(包括IE8)

　　l Last-child: 兼容到IE9+(包括IE9)

　　l nth-child(n):兼容到IE9+(包括IE9)

　　l 解决方案，详见【7.伪类兼容问题】

　　2.Css3属性的兼容情况

　　注解：

　　l Css动画只能支持到ie10+(包括ie10)，Chrome和Safari是没有问题的。

　　l 如果是ie8以下的动画需要用jquery1.x的动画函数实现，jquery2.x是不支持ie9以下的浏览器的动画效果的。

　　l 透明度(opacity)和 rgba() 仅支持到ie9+(包括ie9);如果要兼容到IE8，就要用到滤镜,用法：

　　background: rgba(157,151,162,0.56);

　　filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#569d97a2",endColorstr="#569d97a2");

　　例如：其中“#569d97a2”中后六位(9d97a2)是颜色的十六进制的色值，前两位(“56”)指的是不透明度代表不透明度是0.56。

　　l Border radius, box-shadow: 支持到IE9+(包括IE9)，IE8的解决方案：详见【6.PIE.htc】

　　5.

　　IOS的字体的问题

　　我们在写页面是会发现，数字和英文在ios系统中显示异常，经过研究发现，IOS系统中是识别微软雅黑的字体的，所以在定义字体的时候要写上IOS系统的默认字体，IOS默认的字体为

　　中文字体：STHeiti

　　英文和数字：Helveticas

　　所以在定义字体的时候，要注明Ios

　　font-family:"微软雅黑","Helvetica";

　　6.

　　PIE.htc

　　我们知道IE8浏览器不支持css3的属性，这里PIE实际上是指的是一个名为pie的htc文件，即pie.htc，使用CSS的behavior行为，可以调用此文件，然后使IE8也能实现一部分常见的CSS3效果，如：圆角(border-radius)、渐变(gradient)、阴影(box-shadow)。

　　CSS代码如下(以box-radius为例)：

　　.pie_radius{

　　width:360px;

　　height:200px;

　　background:#34538b;

　　border-radius:8px;

　　-moz-border-radius:8px;

　　-webkit-border-radius:8px;

　　behavior: url(PIE/PIE.htc);behavior:

　　}

　　7. 伪类兼容问题

　　在页面中我们通常会用到伪类，以country项目为例，

　　但是，如果客户要求兼容性是IE7或是IE8的话，这样做就会出错，因为在IE7和IE8下是不支持伪类的。我们可以用另一种方法解决这个问题。为了时左右的内容跟上部分对齐，我们常常使用伪类消除左右两边的间距，这样做是正确的，但是伪类的兼容性不好，只能兼容到IE9+，如果客户要求的兼容性是IE9的话，这样做没有任何问题！

　　1) 不必清掉左右两边的内容的左右边距

　　2) 给循环的元素的父级一个较大的宽度，使其即使在不清掉左右边距的情况下，也能保证内容布局不错乱，跟设计一致！

　　3) 此时这个父级的宽度显然就跟设计不一致了，可以给这个父级再加一个父级，这个父级的宽度要跟设计一致，并为它加上{overflow:hidden}即可。

　　如下图: 去掉.sectionSeven .listType的伪类之后，给”.listType” 的父级“.sectionSeven” 的宽度由之前的1000px增加到1010px(增加10px是因为listType的右边距是10px);这样宽度够大，内容就不会错乱，然后为了保持跟设计图一致的宽度，再给.sectionSeven的父级.bigSection的宽度设置1000px(设计图的宽度),同时设置{overflow:hidden},即隐藏掉多出来的部分即可。