样式问题：

1.清除浏览器默认样式：

引入common.css或reset.css重置默认样式

2.多倍屏1px像素问题和图片模糊问题：

图片模糊使用多倍图，常使用2倍图做统一处理，1px像素问题使用dpr查询和缩放解决（transfrom:scale(0.5/0.33)）

3.禁止复制、选中文本：

-webkit-user-select:none;user-select:none;

4.Ios滑动卡顿问题：

body {-webkit-overflow-scrolling: touch; }

5.rem计算：

 * JS版本
 * 以750为基础做适配，1rem = 100px, 1rem = 100rpx;
 * 监听pc端的resize事件和mobile的横屏（orientationchange）事件
 */
var fun = function (doc, win) {
  var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;

            var fontEl = document.createElement('style');
            var metaEl = document.querySelector('meta[name="viewport"]');

            var dpr = window.devicePixelRatio || 1;
            scale = 1 / dpr;
            // 设置viewport，进行缩放，达到高清效果
            metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
            // 设置data-dpr属性，留作的css hack之用，解决图片模糊问题和1px细线问题
            docEl.setAttribute('data-dpr', dpr);
          //这里是假设在750px宽度设计稿的情况下，1rem = 100px；
          //可以根据实际需要修改
          docEl.style.fontSize =  (clientWidth*dpr / 750)*100 + 'px';
      };
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
}
fun(document, window);

/**
 * CSS版本
 */
html{
    font-size: calc(100vw / 750 * 100);
} 

6.多倍屏处理：

通过媒体查询中的宽高和dpr做判断
/* iphone 3 */
@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 1) { }
/* iphone 4 */
@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 2) { }
/* iphone 5 */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (-webkit-device-pixel-ratio: 2) { }
/* iphone 6, 6s */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { }
/* iphone 7, 8 */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { }
/* iphone 6+, 6s+, 7+, 8+ */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) { }
/* iphone X */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) { }

7.自适应处理：

通过媒体查询 + 样式的覆盖
/*小屏幕*/
@media screen and (max-width: 768px) {}
/*平板*/
@media screen and (min-width: 768px) and (max-width: 992px){}
/*中等屏幕*/
@media screen and (min-width: 992px) and (max-width: 1200px){}
/*大屏幕，或者宽屏*/
@media screen and (min-width: 1200px) {}

8.启用硬件加速：

-webkit-transform:translate3d(0,0,0)
transform: translate3d(0,0,0);

9.修改input框的placehold样式：

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #f00;
}

10.清除ios输入框默认阴影：

-webkit-appearance: none;
#清除ios触摸元素出现半

11.窗口适配，禁止用户缩放：

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

12.清除ios触摸元素出现半透明灰色遮罩：

-webkit-tap-highlight-color: transparent;