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