1.pc
兼容性
1.ie xmhttprequest为activeObject对象
2.ie事件冒泡为cancelbubble 火狐浏览器drag问题
适配:
1920px下的设计图 c3的缩放,通过js获取视图宽度,然后和1920相除得到比率,设为缩放比率,给根元素。
@media only screen and (max-width: 768px) //移动平板和pc的分界线
1.传统方案 设置最小宽度 用margin:auto 0;设置居中即可
2.响应式
1.如果只做pc端,那么静态布局(定宽度)是最好的选择;
2.如果做移动端,且设计对高度和元素间距要求不高,那么弹性布局(rem+js)是最好的选择,一份css+一份js调节font-size搞定;
3.如果pc,移动要兼容,而且要求很高那么响应式布局还是最好的选择,前提是设计根据不同的高宽做不同的设计,响应式根据媒体查询做不同的布局。
2.移动;
适配:
html{
font-size:-webkit-calc(100vw/7.5)
}
body{
font-size:.26rem;
margin:0;
overflow: auto;
-webkit-overflow-scrolling: touch; //防止IOS滑动抖动,有一个回弹效果
min-width: auto;
}
其他:
1.fastclick 解决点击延迟
2.1px解决方案 devicePixelRatio DPR = 设备像素 / CSS像素(某一方向上) https://blog.csdn.net/a419419/article/details/79295799
3.<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
4.safeareainsetbottom 解决刘海屏