Pertanyaan Tata letak cairan dan sprite css


Saya menggunakan sprite css untuk menampilkan latar belakang pada desain lebar tetap. Saya mengubah ke tata letak cairan, tetapi karena latar belakang posisi gambar latar belakang berjalan miring ketika browser mengubah ukuran.

Apakah mungkin untuk menggunakan sprite css dengan latar belakang grid cairan, di mana ia mengubah ukurannya dengan tata letak?

Saya perlu layout yang kompatibel dengan 7 dan 8 dengan browser terbaru lainnya


5
2018-02-05 18:06


asal


Jawaban:


Menambah apa yang @brianMaltzan tulis tentang @media Anda dapat menggunakan kelompok resolusi yang berbeda untuk memiliki stylesheet yang berbeda

<link rel='stylesheet' media='(max-width: 700px)' href='css/small.css' />
<link rel='stylesheet' media='(min-width: 701px) and (max-width: 1024px)' href='css/medium.css' />
<link rel='stylesheet' media='(min-width: 1025px)' href='css/large.css' />

atau blok kode css untuk gaya halaman Anda:

@media (max-width: 860px) {
    body {
         width: 600px;
    }
}
@media (min-width: 861px) and (max-width: 1024px) {
    body {
         width: 800px;
    }
}
@media (min-width: 1025px) {
    body {
         width: 1000px;
    }
}

Saya akan menyarankan untuk menggunakan beberapa ukuran tetap yang akan berubah dengan setiap stylesheet, daripada persentase (jika Anda menggunakannya). Dapatkah Anda menunjukkan kepada kami contoh nyata sprite di tempat dengan tata letak cairan Anda sehingga kami dapat melihat masalahnya?


2
2018-02-05 20:49



Saya belum mencoba ini, tetapi ada orang yang melakukan ini dengan CSS Clip.

http://bowdenweb.com/wp/2011/08/making-responsive-accessible-high-dpi-css-sprites.html

http://chiefalchemist.com/responsive-css-sprites-proof-of-concept-v0-1-0/


2
2018-02-06 20:34



@media dapat bekerja untuk Anda. Tidak yakin tentang IE7 & 8.


0
2018-02-05 18:12



Tidak, itu tidak mungkin. Solusi yang disarankan adalah menggunakan peta sprite dalam gambar sebaris dan memiliki tinggi dan lebar elemen yang ditetapkan dalam CSS Anda. Ini tautan menjelaskan bagaimana melakukan ini. Ini memungkinkan gambar Anda untuk mengubah ukuran dengan tata letak.


0
2018-02-06 16:13



Jika Anda ok menggunakan JS, mungkin saja, seperti cuplikan ini. Saya menggunakan jquery tetapi Anda dapat mengubahnya dengan mudah dalam js murni.

Saya mengukur sprit dengan menghitung rasio antara lebar sprit dan lebar induknya. Saya menetapkan beberapa margin negatif di atasnya, karena skala div dengan mengubah properti css mengubah aspek tetapi tidak menghitung ukuran.

var $sprits = $('.sprit');
$sprits.each(function() {
  
  $(this).data('originalWidth', $(this).width());
  $(this).data('originalHeight', $(this).height());
  $(this).data('originalParentHeight', $(this).parent().height());
})

function setSpritsScale() {
  
  $sprits.each(function() {
    
    ratio = $(this).parent().width() / $(this).data('originalWidth');
    marginWidth = $(this).data('originalWidth') - $(this).parent().width();
    marginHeight = $(this).data('originalHeight') - $(this).data('originalParentHeight') * ratio;
    $(this).css({
      'transform': 'scale(' + ratio + ')',
      'margin': (-marginHeight / 2) + 'px ' + (-marginWidth / 2) + "px"
    });

  })
}

$(window).resize(setSpritsScale);

setSpritsScale();
.columns {
  float: left;
  width: 20%;
}
.sprit {
  display: inline-block;
  background-image: url('http://changlee.com.br/cascavel/wp-content/uploads/2013/10/sprite2l-500x500.jpg');
  background-repeat: no-repeat;
  min-width: 75px;
  min-height: 75px;
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="columns">
  <div class="sprit"></div>
</div>

<div class="columns">
  <div class="sprit"></div>
</div>
<div class="columns">
  <div class="sprit"></div>
</div>
<div class="columns">
  <div class="sprit"></div>
</div>
<div class="columns">
  <div class="sprit"></div>
</div>


0
2018-04-07 09:27