【杂记】（内容盒子撑满、复选框的全选与单选效果、终止后面的脚本运行、背景颜色图片一起、动画上下垂直动、图片大小不一、根据视网膜屏来判断点击事件、判断分辨率精细终端、响应式图片处理、同一个按钮多次点击）

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;
)}