css 有什么办法支持高清屏下 图片适配 怎么做

Question

我知道可以用-webkit-image-set

不过firefox edge ie11好像不行

只要支持到ie11 firefox edge

我找到一种写法
grace的写法是什么意思 为什么要在media后在加个background-size

.foo {
  background-image: url(../../src/img/[e-mail]);
  background-image: -webkit-image-set(url(../../src/img/[e-mail]) 1x, url(../../src/img/[e-mail]) 2x); }

@media only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .foo {
    background-image: url(../../src/img/[e-mail]);
    background-size: 512px 272.5px; } }

Answer 1

主要有四种实现方式：
1. media query + pixel-ratio 实现
2. img标签引用的不同大小图片，通过retina.js根据设备自动替换图片地址
3. image-set 实现（不兼容微信浏览器）
4. svg 实现

具体各种方案的优缺点参见这篇文章：http://mutian.wang/tech/1386。