响应式学习总结
一、手机浏览器默认为我们做的两件事情:
1.页面渲染在一个980px(ios)/640(aniord)的viewport里面(为了排版正确)
2、默认缩放
二、<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
三、不定宽高的水平垂直居中:
方法1:box{
postion:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
z-index:3;
border-radius:6px;
background:#000;
}
方法2 :flex版:
box{
display:flex; //设为弹性盒子
justify-content:center; //子元素水平居中
align-items:center; //子元素垂直居中
}
四、响应式设计:
媒体查询(根据不同的屏幕宽度,设置不同的css样式,显示或隐藏等)
图片响应式:
img{
display:block;
max-width:100%;
}
五、1像素边框:
同样是retina屏幕下,根本原因:1px使用2dp渲染。
解决方法:border:0.5px(但仅仅ios8可以用)
更好的方法:scaleY(.5)
li{padding:8px 0 8px 15px;color:#ccc;cursor:pointer;postion:relative;}
li:bofore{postion:absolute;top:-1px;left:0;content:'';width:100%;height;1px;border:1px solid #000;-webkit-tranform:scaleY(.5);}
六、相对单位:
rem的基值设置:
rem=screen.width/10;
//默认320px
html{font-size:32px;}
//iphone6
@media(min-device-width:375px){
html{font-size:37.5px;}
}
//iphone6 plus
@media(min-device-width:414px){
html{font-size:41.4px;}
}
建议:一般情况下,文字和一些固定元素,最好使用px
单行文本溢出...
txt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
多行文本溢出...
text{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-camp:3;word-break:break-all;}
七、事件:为什么移动设备上不使用click事件---有300ms延迟 怎么破?
使用tap代替click事件:Zepto封装
原理:在touchstart /touchend时,记录时间和手指位置,然后进行比较,如果位于同一位置且时间较短(<200ms),且未触发touchmove,即可认为tap事件,即移动设备上的click。
click事件触发过程:
touchstart--touchend--300ms--click触发
tap事件过程:
touchstart--touchend--tap触发
点透发生过程:
touchstart(点击蒙层)--touchend(蒙层消失)--300ms--target为btn,click触发
局部滚动开启弹性滚动:
body{overflow:scroll;-webkit-overflow-scrolling:touch;}