Pertanyaan Apakah ada generator sprite CSS yang juga memberikan retina -versi? [Tutup]


Jika sudah ada, saya akan sangat menghargai jika seseorang dapat memberikan beberapa petunjuk tentang cara membuat retina dan CSS retina non-retina sendiri. Sebaiknya gunakan beberapa CSS sprite -generator dalam proses jika memungkinkan.

Terkait dengan topik: http://miekd.com/articles/using-css-sprites-to-optimize-your-website-for-retina-displays/

Terima kasih semuanya sebelumnya!


5
2018-03-17 11:00


asal


Jawaban:


Metode 1

Inilah Mixin untuk mencapai ini dengan Kompas

Metode 2

  1. Buat dua versi file gambar Anda, satu untuk layar kerapatan "biasa", yang lain untuk layar retina, dengan gambar dua kali resolusi. (Berarti jika salah satu gambar berukuran 23px kali 41 px, versi retina akan menjadi 46px kali 28 px)
  2. Pergi ke http://spritegen.website-performance.org/ dan buat dua versi gambar sprite Anda. Mari kita asumsikan gambar Anda memiliki dimensi yang lebih kecil dari 25px. Pilih Horizontal Offset: 25px dalam versi non-retina pertama, dan 50px dalam versi retina. Simpan sprite Anda sebagai sprite.png dan spritex2.png
  3. Dalam file css Anda sekarang dapat mendefinisikan sesuatu di sepanjang garis kasar:

    .#spriteA,spriteB{
         background-image: url(sprite.png);
         width:25px;
         height:25px;
     }        
    
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-resolution: 240dpi) {
    .#spriteA,spriteB{
         background-image: url(spriteX2.png);
         width:25px;
         height:25px;
     }
    }
    
    .spriteA{ background-position: 0 50%; }
    .spriteB{ background-position: -31px 50%; }
    

Dengan cara ini, rasio posisi latar belakang (50%) dipertahankan apakah Anda menggunakan resolusi non-retina atau retina.


5
2018-03-17 11:33



Berikut ini adalah alat online lain untuk membuat retina sprite low & hiDef: cssspritegenerator.net

Bisa juga menghasilkan gambar webp, dan dengan gambar yang lebih besar ukurannya lebih besar, jadi kita perlu menguranginya menjadi @ 1-ukuran sprite dengan format gambar yang lebih baik;)


2
2018-01-15 21:41



Ada beberapa task manager, mixins, dan generator online untuk tujuan ini. Saya pribadi menggunakan grunt sebagai task manager dan Sprite Smith sebagai modul di beberapa proyek saya.

Saya juga menggunakan http://www.retinaspritegenerator.com untuk menghasilkan sprite cepat dengan dukungan retina. Ini juga memiliki pilihan algoritma urutan seperti Sprite Smith.


1
2018-06-02 09:33



Saya tahu ini adalah pertanyaan yang lebih tua, tetapi menambahkan tanggapan ini jika membantu orang lain dengan pertanyaan serupa.

Saya membuat beberapa pembaruan untuk smartsprites alat untuk dapat mendukung retina sprite. Dengan alat ini, Anda pada dasarnya membuat anotasi CSS Anda dengan arahan yang memberitahukan alat mana gambar untuk sprite, menjalankan alat, dan itu akan menghasilkan gambar sprite dan memodifikasi CSS untuk referensi gambar baru.

Alat ini memberi Anda dukungan berbutir halus di mana gambar di-sprite, bagaimana sprite diletakkan, dan gambar sprite padding, antara lain. Semoga itu membantu!


0
2017-07-26 16:55



Ada beberapa generator sprite retina yang menakjubkan di luar sana. Saya baru-baru ini menggunakan beberapa dari mereka yang saya cintai secara pribadi. 1 Sprite 2 Kotak sprite 3 Retina sprite 4. Zero Sprite 5. Generator Sprite

Seperti yang disebutkan dalam jawaban sebelumnya, Sprite Smith adalah satu lagi generator yang mengagumkan.


0
2017-07-21 21:17