1

これは私のイメージタグがどのように見えるかです:

<img 
    src="img/thumb-teste-270x190.jpg" alt="usro" 
    sizes="(max-width: 20em) 100vw, 
           (min-width: 50em) 10vw"
    srcset="img/thumb-teste-270x190.jpg 270w,
            img/thumb-teste-690x486.jpg 690w"
>

デスクトップ デバイスの場合、小さい親指 (270x190) を使用します。モバイル デバイスの場合は、大きな親指 (690x486) を使用します。しかし、中程度の親指 (540x380) を使用する Retina デスクトップのルールを作成するにはどうすればよいでしょうか?

4

1 に答える 1

1

540x380 の画像を Retina で使用する必要があることを指定する必要はありません。その画像をsrcsetブラウザーに追加するだけで、いつ使用するかを判断するのに十分スマートでなければなりません。

<img 
   src="img/thumb-teste-270x190.jpg" alt="usro" 
   sizes="(max-width: 20em) 100vw, 
          (min-width: 50em) 10vw"
   srcset="img/thumb-teste-270x190.jpg 270w,
           img/thumb-teste-540x380.jpg 540w,
           img/thumb-teste-690x486.jpg 690w"
>

これについても良い投稿があります。

于 2015-04-16T22:08:23.303 に答える