pc端和移动

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  解决刘海屏