HTML5兼容性
caniuse工具
1、查看各个浏览器对h5的支持情况:https://caniuse.com/
2、将要查询的标签填进去,如header
//绿色支持,红色不支持,黄色要加前缀,灰色未知
html5shiv工具
1、低版本IE浏览器支持最新的h5标签,用
https://github.com/aFarkas/html5shiv
2、下载完,解压
//复制 dist/html5shiv.js //或 dist/html5shiv-printshiv.js //到项目中,二选一即可
3、在页面中引入
<script type="text/javascript" src="html5shiv.js"></script>
4、就可以正常使用html5的新标签了
CSS3兼容性
Modernizr工具
//用来检测html/css/js是否支持某属性
使用
如现在用来检测浏览器是否支持flex。
1、打开网址,点击添加检测(Add your detects),后输入flexbox,加号选择。(当然可以检测多种属性)
2、点击build生成你的检测代码,然后可以选择复制该代码,还是下载代码后引入。(我是下载后引入)
3、把下载的代码塞到项目目录,在html引入
<script type="text/javascript" src="modernizr-custom.js"></script>
4、打开该文件,若支持flexbox的话,html会加上类名flexbox;若不支持,html会加上类名no-flexbox
5、根据不同的类名,指定不同的方案,如:
.flexbox header{ //支持flex的采用这种方案
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:-o-flex;
display:flex;
justify-content:center;
-ms-align-items:center;
align-items:center;
}
.no-flexbox header{ //不支持flex的采用这种方案
text-align:center;
line-hieght:40px;
}
Javascript的兼容性
如检测:requestAnimationFrame
//当然,可以使用上面的modernizr工具
1、检测浏览器是否支持这个方法
if(window.requestAnimationFrame){
console.log("支持");
}else{
console.log("不支持");
}
//判断时不能用if(requestAnimationFrame),若不支持会报错
2、若不支持,可以
//兼容性定义
var requestAnimationFrame = window.requestAnimationFrame ||
window.webkit-RequestAnimationFrame ||
window.mozRequestAnimationFrame ||
oRequestAnimationFrame ||
msRequestAnimationFrame ||
function(fn){ setTimeout(fn,1000); };
//调用requestAnimationFrame
requestAnimationFrame(function(){
console.log("执行");
});
移动端click事件的300ms延迟
原因:移动端有个dbclick事件,只要300ms内再点一次就完成dbclick操作。dbclick操作会使页面放大。
解决方法一:在一些浏览器中,只要 viewport 中含有 width=device-width ,那么300ms延迟就不会有
解决方法二:
fastclick工具
1、下载地址:https://github.com/ftlabs/fastclick
2、解压复制 lib 下的 fastclick.js 到项目中。后引入
<script type=‘application/javascript‘ src=‘fastclick.js‘></script>
3、在js部分直接粘贴
if (‘addEventListener‘ in document) { document.addEventListener(‘DOMContentLoaded‘, function() { FastClick.attach(document.body); }, false); }
即可解决
单行文字溢出省略
.text-ellipsis{ /*单行文字溢出隐藏*/ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }/*不能直接与flex布局使用。不过可以在孙元素使用*/
多行文字溢出省略
.multiline-ellipsis{ /*多行文字溢出隐藏*/ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:3;/*显示3行,多出就省略号*/ white-space:normal !important; word-wrap: break-word; }/*可以搭配flex。容器最好不要设置高度,若容器太高就没效果*/
水平居中和垂直居中
没有指定宽高
内联元素
/*一种*/ span{ display:inline; padding: 0 30px; } <span>内联文字 垂直水平居中</span> /*二种*/ span{ display:inline; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } <span>内联容器 垂直水平居中</span> /*三种*/ div{ display:flex; justify-content:center; align-items:center; } <div> <span>内联文字 和 内联容器</span> </div>
内联块元素
/*一种*/ span{ display:inline-block; padding:30px 20px; } <span>内联块元素,设置了内边框里面的内容都会居中</span> /*二种*/ span{ display:inline-block; position:absolute; left:50%; top:50%; tansform:translate(-50%,-50%); } <span>内联块元素</span>
块元素
/*一种*/ span{ display:block; text-align:center; padding:30px 0; } <span>块元素内文字居中</span> /*二种*/ span{ display:block; position:absolute; /*定位之后,相当于做了display:inline-block*/ width:100%; /*这样就可以解决*/ left:50%; top:50%; tansform:translate(-50%,-50%); } <span>块元素的居中</span>
指定宽高
内联块元素
/*一种,单行文字居中*/ span{ display:inline-block; width:300px; height:200px; text-align:center; line-height:300px; } <span>内联块元素,有宽高的居中</span> /*二种,多行文字居中*/ span{ display:flex; width:300px; height:200px; justify-content:center; align-items:center; text-align:center; /*flex布局居中的是文字的整体,而不是每一行,若有需求可以加这个*/ } <span>内联块元素,有宽高的居中</span> /*三种,容器居中*/ span{ display:inline-block; width:300px; height:200px; position:absolute; left:50%; top:50%; margin-left:-150px; margin-top:-100px; } <span>内联块元素居中</span>
块元素
/*一种,文本*/ span{ display:block; width:300px; height:200px; text-align:center; lin-hieght:200px; } /*或者使用flex布局*/ <span>块级元素内,文本居中</span> /*二种,容器*/ span{ display:block; width:300px; height:200px; left:50%; top:50%; /*这个*/ transform:translate(-50%,-50%); /*或者 margin-left:-150px; margin-top:-100px; */ } <span>块元素,容器居中</span>