判断浏览器类型，CSS兼容不同浏览器的写法，CSS自适应不同设备宽度的写法
CSS3中兼容谷歌的前缀
----------------------------------------------------------------------------
CSS3中的兼容性问题一直是前端开发者的重要关注点之一。其中，兼容谷歌浏览器的前缀更是一大难点，下面小编为大家介绍一下相关知识点。
/* 在谷歌浏览器中使用flex布局，需要加上-webkit-前缀 */
display: -webkit-flex;
display: flex;
/* 谷歌浏览器中线性渐变需要加上-webkit-前缀 */
background: -webkit-linear-gradient(red, yellow);
/* 盒阴影需要在谷歌浏览器中使用-webkit-box-shadow前缀 */
box-shadow: -webkit-box-shadow: 10px 10px 5px #888888;
box-shadow: box-shadow: 10px 10px 5px #888888;
/* 旋转效果需要在谷歌浏览器中使用-webkit-transform前缀 */
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
上面的代码中，我们可以看到在谷歌浏览器中需要添加-webkit-前缀。这是因为不同的浏览器支持的CSS3属性可能存在差异，而前缀可以让浏览器在实现属性时选择正确的方式。
然而，随着浏览器的不断更新迭代，很多CSS3属性已经不需要添加前缀了。比如常用的flex布局、变形效果、动画效果等属性，新版浏览器已经不需要前缀就可以实现。
因此，在使用CSS3样式时，我们需要清醒认识到哪些属性还需要前缀，哪些已经不需要了。这样才能让我们轻松应对页面开发中的兼容问题。
前端css中常见的-moz-,-webkit-,-o-分别是什么？
----------------------------------------------------------------------------
-moz-,-webkit-,-o-这三个是厂商前缀
不同浏览的厂商,因为不同浏览器有不同的标准，
所以为了兼容性，需要把常用的浏览器对应的厂商前缀加上。
所以四个属性代表的是一个意思。
-moz- 是火狐浏览器厂商前缀
-webkit- 是谷歌浏览器厂商前缀
-o- 是opera浏览器厂商前缀
CSS兼容 -webkit-xxx 的含义
----------------------------------------------------------------------------
-webkit- 是 WebKit 浏览器引擎所采用的浏览器私有前缀，用于支持实验性或未被标准化的 CSS 属性和特性。
-webkit- 是表示针对 safari、chrome 浏览器支持（webkit内核的私有属性），
-ms- 表示针对 IE 浏览器支持私有属性。
-moz- 是Firefox Gecko内核，moz代表的是Firefox的开发商Mozilla。
-webkit-
在 WebKit 浏览器中，开发者可以在 CSS 属性前加上 -webkit- 前缀，以启用 WebKit 浏览器引擎的私有实现。例如，-webkit-border-radius 属性可以设置元素的圆角。
以下是一个使用 -webkit- 前缀的示例代码：
.box {
-webkit-border-radius: 10px;
border-radius: 10px;
}
如下表示的是在 X 轴向右移动 50px, Y 轴向下移动 100px。
div {
-ms-transform: translate(50px, 100px);
-webkit-transform: translate(50px, 100px);
transform: translate(50px, 100px);
}
- `scale`：
缩放，1 为原始大小。参数正数时放大，负数缩小。属性值为一个时，`x/y` 轴同时缩放；属性值为两个值时，分别控制 `x`、`y` 轴的缩放。
- `rotate`：
水平旋转，属性值格式为 `Xdeg`。`X` 为正数时，顺时针旋转；为负数时，逆时针旋转
- `translate`：
平移，基于 `XY` 轴重新定位元素。属性值为一个时，`x`、`y` 轴参数相同；为两个时，`x`、`y` 轴分别定位
- `skew`：将元素沿水平方向倾斜变形。属性值为一个时，`x/y` 轴参数相同；为两个时，`x`、`y` 轴各自倾斜。
注意：
需要注意的是，使用 -webkit- 前缀的属性并不是 W3C 标准中定义的标准 CSS 属性，因此可能不被所有浏览器支持。因此，在使用 -webkit- 前缀的属性时，应该尽可能地提供一个标准的 CSS 属性作为备选方案，以确保在不同的浏览器中都能正确地显示
CSS3 Media 的媒体查询。在第一段代码上用的是小于960px尺寸的写法，那现在来实现等于960px尺寸的代码：
@media screen and (max-device-width:960px){
body{
background:red;
}
}
然后是浏览器尺寸大于960px时的代码：
@media screen and (min-width:960px){
body{
background:orange;
}
}
还可以混合使用上面的用法：
@media screen and (min-width:960px) and (max-width:1200px){
body{
background:yellow;
}
}
上面这段代码的意思是当页面宽度大于960px且小于1200px的时候执行下面的CSS。
Media所有参数汇总
----------------------------------------------------------------------------
以上是最常用到的媒体查询器的三个特性，大于，等于，小于的写法。媒体查询器的全部功能肯定不止这三个功能，下面总结它的一些参数用法：
width:浏览器可视宽度。
height:浏览器可视高度。
device-width:设备屏幕的宽度。
device-height:设备屏幕的高度。
orientation:检测设备目前处于横向还是纵向状态。
aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)
device-aspect-ratio:检测设备的宽度和高度的比例。
color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）
color-index:检查设备颜色索引表中的颜色，他的值不能是负数。
monochrome:检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）
resolution:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。
grid：检测输出的设备是网格的还是位图设备。
注意以下顺序，如果把@media (min-width: 768px)写在了最下方，那么很悲剧，
@media (min-width: 1200){ //>=1200的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 768px){ //>=768的设备 }
这是因为如果屏幕宽度是1440，由于1440>768那么1200就会失效。
所以在使用min-width时，小的在前面，大的在后面；同理，如果使用max-width时，就是大的在前面，小的在后面。
@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }
@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }
横屏与竖屏
/* 竖屏 */
@media screen and (orientation: portrait) and (max-width: 720px) { 对应样式 }
/* 横屏 */
@media screen and (orientation: landscape) { 对应样式 }
PC端按屏幕宽度大小排序
分辨率 比例 | 设备尺寸
1024*500 （8.9寸）
1024*768 （比例 4：3 | 10.4寸、12.1寸、14.1寸、15寸; ）
1280*800 （比例 16：10 |15.4寸）
1280*1024 （比例 5：4 | 14.1寸、15.0寸）
1280*854 （比例 15：10 | 15.2）
1366*768 （比例 16：9 | 不常见）
1440*900 （比例 16：10 17寸 仅苹果用）
1440*1050 （比例 5：4 | 14.1寸、15.0寸）
1600*1024 （比例 14：9 不常见）
1600*1200 （比例 4：3 | 15、16.1）
1680*1050 （比例 16：10 | 15.4寸、20.0寸）
1920*1200 （23寸）
通过上面电脑屏幕尺寸的例表得到了几个宽度：1024、1280、1366、1440、1600、1680、1920。
屏幕自适应CSS3代码
@media (min-width: 1024px){
body{font-size: 18px}
} /*>=1024的设备*/
@media (min-width: 1100px) {
body{font-size: 20px}
} /*>=1024的设备*/
@media (min-width: 1280px) {
body{font-size: 22px;}
}
@media (min-width: 1366px) {
body{font-size: 24px;}
}
@media (min-width: 1440px) {
body{font-size: 25px !important;}
}
@media (min-width: 1680px) {
body{font-size: 28px;}
}
@media (min-width: 1920px) {
body{font-size: 33px;}
}
/* 只针对Chrome浏览器 */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
.hide-in-chrome {
display: none;
}
}
/* 只针对Firefox火狐浏览器 */
@-moz-document url-prefix() {
.test {
font-size: 2rem;
}
}
/* 只针对Chrome浏览器，并且屏幕最大宽度不超过1200像素(更改成对应移动设备的尺寸，做自适应处理，以兼容不同设备不同浏览器宽度的排版) */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) and (max-width:1200px){
.piece3-5{ top: 462vw; }
}
一、判断是否为IE浏览器
以前判断是否IE浏览器用的是window.navigator.userAgent，跟踪这个信息，发现在开发环境，识别为IE10，但访问服务器则识别为IE11，但IE11的userAgent里是没有MSIE标志的，所以原来的判断方式就判断不出IE11。
原来的函数写法：对于新版的ie11已经不支持了
function isIE(){
if (window.navigator.userAgent.indexOf("MSIE")>=1)
return true;
else
return false;
}
ie10及以上不支持ie浏览器的判断了，因为ie11已经不支持document.all了，下面是支持ie11的版本的，当然ie6-8也是支持的。
function isIE() {
if (!!window.ActiveXObject || "ActiveXObject" in window)
return true;
else
return false;
}
二、根据 userAgent 判断浏览器类型
/*
* 描述：判断浏览器信息
* 编写：LittleQiang_w
* 日期：2016.1.5
* 版本：V1.1
*/
//判断当前浏览类型
function BrowserType()
{
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
var isEdge = userAgent.indexOf("Windows NT 6.1; Trident/7.0;") > -1 && !isIE; //判断是否IE的Edge浏览器
var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器
var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判断Chrome浏览器
if (isIE) {
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
if(fIEVersion == 7)
{ return "IE7";}
else if(fIEVersion == 8)
{ return "IE8";}
else if(fIEVersion == 9)
{ return "IE9";}
else if(fIEVersion == 10)
{ return "IE10";}
else if(fIEVersion == 11)
{ return "IE11";}
else
{ return "0"}//IE版本过低
}//isIE end
if (isFF) { return "FF";}
if (isOpera) { return "Opera";}
if (isSafari) { return "Safari";}
if (isChrome) { return "Chrome";}
if (isEdge) { return "Edge";}
} //myBrowser() end
//判断是否是IE浏览器
function isIE()
{
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
if(isIE)
{
return "1";
}
else
{
return "-1";
}
}
//判断是否是IE浏览器，包括Edge浏览器
function IEVersion()
{
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
var isEdge = userAgent.indexOf("Windows NT 6.1; Trident/7.0;") > -1 && !isIE; //判断是否IE的Edge浏览器
if(isIE)
{
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
if(fIEVersion == 7)
{ return "IE7";}
else if(fIEVersion == 8)
{ return "IE8";}
else if(fIEVersion == 9)
{ return "IE9";}
else if(fIEVersion == 10)
{ return "IE10";}
else if(fIEVersion == 11)
{ return "IE11";}
else
{ return "0"}//IE版本过低
}
else if(isEdge)
{
return "Edge";
}
else
{
return "-1";//非IE
}
}
以上代码通过测试，但存在一个问题，即IE5与IE7浏览器暂不能区分，以下是IE5与IE7下userAgent的信息；通过userAgent发现，简单的通过以上方法，无法正确区分IE5和IE7。
三、各浏览器的 userAgent
1、IE
（1）IE11
Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; Touch; .NET4.0C; .NET4.0E; Tablet PC 2.0; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko
（2）IE10
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; Touch; .NET4.0C; .NET4.0E; Tablet PC 2.0; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
（3）IE9
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; Touch; .NET4.0C; .NET4.0E; Tablet PC 2.0; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
（4）IE8
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; Touch; .NET4.0C; .NET4.0E; Tablet PC 2.0; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
（5）IE7
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/7.0; Touch; .NET4.0C; .NET4.0E; Tablet PC 2.0; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
（4）IE5
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/7.0; Touch; .NET4.0C; .NET4.0E; Tablet PC 2.0; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
2、Edge
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.79 Safari/537.36 Edge/14.14393
Edge 的userAgent还包含了 Chrome 和 Safari的特征。
3、Firefox48.0
Mozilla/5.0 (Windows NT 10.0; WOW64; rv:48.0) Gecko/20100101 Firefox/48.0
四、各浏览器特性
1、IE
只有IE支持创建ActiveX控件，因此她有一个其他浏览器没有的东西，就是ActiveXObject函数。只要判断window对象存在ActiveXObject函数，就可以明确判断出当前浏览器是IE。而IE各个版本判断userAgent。
2、Firefox
Firefox中的DOM元素都有一个getBoxObjectFor函数，用来获取该DOM元素的位置和大小（IE对应的中是getBoundingClientRect函数）。这是Firefox独有的，判断它即可知道是当前浏览器是Firefox。Firefox的版本用 userAgent 判断，其中，版本号是Firefox之后的数字。
3、Opera
Opera提供了专门的浏览器标志，就是window.opera属性。Opera典型的userAgent如下：
Opera/9.27 (Windows NT 5.2; U; zh-cn)
其中，版本号是靠近Opera的数字。
4、Safari
Safari浏览器中有一个其他浏览器没有的openDatabase函数，可做为判断Safari的标志。Safari通过userAgent如下：
Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Version/3.1 Safari/525.13
其版本号是Version之后的数字。
5、Chrome
Chrome有一个MessageEvent函数，但Firefox也有。不过，好在Chrome并没有Firefox的getBoxObjectFor函数，根据这个条件还是可以准确判断出Chrome浏览器的。目前，Chrome的userAgent是：
Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13
其中，版本号在Chrome只后的数字。Chrome的userAgent还包含了Safari的特征。
可以根据各浏览器的特性来判断浏览器类型，我们把对IE的判断放在第一，因为IE的用户最多，其次是判断Firefox。按使用者多少的顺序来判断浏览器类型，可以提高判断效率，少做无用功。之所以将Chrome放在第三判断，是因为我们预测Chrome很快会成为市场占有率第三的浏览器。其中，在分析浏览器版本时，用到了正则表达式来析取其中的版本信息。
如：ua.match(/version\/([\d.]+)/)。