1. h5盒子撑满
div{width:100vw;height:100vh;position:fixed;left:left;top:0}
2. 复选框的全选与单选效果
3. 终止后面的脚本运行javascript:void(0)，通常写在a标签中
4. 背景颜色图片一起
background:url(../images/arrow-r.png) 215px 15px #f9f9f9 no-repeat;
5. css3动画 上下垂直动
div{animation: myMove .5s infinite
;}
@keyframes myMove {
0% {top: -1.1rem
;}
50% {top: -1.3rem
;}
100% {top: -1.1rem
;}
}
6. 图片大小不一width:100%;height:100%;
7. 多行文本在盒子里垂直居中display:table-cell; vertical-align:middle;
8. 根据视网膜屏来判断点击事件
if(window
.devicePixelRatio
==1){
$('body').bind('click', function(event
){});
}else if(window
.devicePixelRatio
==2){
$('body').bind('touchstart', function(event
){});
}
9. 判断分辨率精细终端
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min- kit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) 就是判断终端的像素比是2的话，所渲染的样式。iphone4以上像素比是2，高分辨率Andriod设备像素比是1.5，例子里只有像素比为2的查询，1.5的或者其他比例方法一样，前面用的是几种浏览器的私有属性，最后一种是通用属性。
10. 响应式图片处理
<picture alt="image description">
<source src="/path/to/medium-image.png" alt="响应式图片的3种解决方案" media="(min-width: 600px)">
<source src="/path/to/large-image.png" alt="响应式图片的3种解决方案" media="(min-width: 800px)">
<img src="/path/to/mobile-image.png" alt="响应式图片的3种解决方案" alt="image description">
</picture>
11. 同一个按钮多次点击
通过exten赋值来判断
var exten
=0;
$(".按钮").click(function(){
if(exten
==0){
$(".tb-right .top-nav").css("overflow","inherit");
exten
=1;
}else if(exten
==1){
$(".tb-right .top-nav").css("overflow","hidden");
exten
=0;
)}
