## 样式兼容性整理

### 红米手机 - 圆角外背景色溢出(H5)
使用CSS3中的background-clip规定背景的绘制区域,将背景裁剪到内边距框
```css
.circle{
    background-clip:padding-box;
}
```

### input placeholder居右,android不兼容(H5)
把文本方向设置为“从右向左”,可以解决该问题
```css
input::-webkit-input-placeholder {
    direction: rtl;
}
```

### 全屏背景图片兼容尺寸(H5)
目前使用iPhone 6 Plus 屏幕尺寸(414*736 / 750*1334)为兼容尺寸
```css
body {
    background: url('http://media.winbaoxian.com/videolive/signup/images/bg-start-v2.jpg') no-repeat 0 0 transparent;
    background-size: 100%;
}
```

### 图片或背景高清化
1. 方案一
  ```css
  /* 普通显示屏(设备像素比例小于等于1)使用1倍的图 */
  .css{
    background-image: url(http://img.winbaoxian.com/videolive/signup/images/bg-start-v2.jpg@100w_1x.jpg);
  }
  /* 高清显示屏(设备像素比例大于等于2)使用2倍图  */
  @media only screen and (-webkit-min-device-pixel-ratio:2){
    .css{
      background-image: url(http://img.winbaoxian.com/videolive/signup/images/bg-start-v2.jpg@100w_2x.jpg);
    }
  }
  /* 高清显示屏(设备像素比例大于等于3)使用3倍图  */
  @media only screen and (-webkit-min-device-pixel-ratio:3){
    .css{
      background-image: url(http://img.winbaoxian.com/videolive/signup/images/bg-start-v2.jpg@100w_3x.jpg);
    }
  }
  ```
2. 方案二
  image-set 实现高清化,目前移动端ios7+，android 4.4+ 下已经支持了
  ```css
  .css {
    background-image: url(http://img.winbaoxian.com/videolive/signup/images/bg-start-v2.jpg@100w_2x.jpg);    /*不支持image-set的情况下显示*/
    background: -webkit-image-set(
      url(http://img.winbaoxian.com/videolive/signup/images/bg-start-v2.jpg@100w_1x.jpg) 1x,/* 支持image-set的浏览器的[普通屏幕]下 */
      url(http://img.winbaoxian.com/videolive/signup/images/bg-start-v2.jpg@100w_2x.jpg) 2x,/* 支持image-set的浏览器的[2倍Retina屏幕] */
      url(http://img.winbaoxian.com/videolive/signup/images/bg-start-v2.jpg@100w_3x.jpg) 3x/* 支持image-set的浏览器的[3倍Retina屏幕] */
    );
  }
  ```