jquery menukar saiz bentuk secara dinamik

Dalam reka bentuk web moden, reka bentuk responsif semakin mendapat perhatian. Halaman yang dipaparkan secara adaptif pada peranti berbeza boleh memberikan pengalaman pengguna yang lebih baik. Salah satu perkara teknikal yang penting ialah mengubah saiz borang secara dinamik. Hari ini kita akan bercakap tentang cara menggunakan jQuery untuk melaksanakan fungsi ini.

Mengapa menukar saiz tetingkap secara dinamik

Dengan populariti peranti mudah alih dan kemas kini dan lelaran yang berterusan, kami selalunya perlu menyesuaikan beberapa kandungan pada peranti pengguna. Sebagai contoh, halaman web mungkin mahu memaparkan satu susun atur pada TV skrin lebar, tetapi pada telefon mudah alih ia hendaklah dalam reka letak menegak dan mengubah saiz agar sesuai dengan kawasan tontonan pengguna.

Oleh kerana wujudnya banyak faktor yang berbeza seperti saiz peranti dan resolusi pengguna yang berbeza, kami tidak dapat menentukan saiz halaman terlebih dahulu, jadi kami perlu menukar saiz tetingkap secara dinamik untuk menyesuaikan diri dengan peranti yang berbeza.

Gunakan jQuery untuk menukar saiz borang

jQuery ialah perpustakaan Javascript yang sangat praktikal yang memudahkan pengendalian dokumen HTML, termasuk beberapa operasi biasa seperti menukar gaya, bertindak balas kepada operasi pengguna, dan lain-lain tunggu. Oleh itu, kita boleh menggunakan jQuery untuk lebih mudah melaksanakan fungsi menukar saiz tetingkap.

$(window).resize(function(){
  //当浏览器窗口大小变化时，执行以下代码
  var width = $(window).width(); //获取浏览器窗口宽度
  var height = $(window).height(); //获取浏览器窗口高度
  if(width < 768){
    $('body').css('background-color', 'red');
  } else {
    $('body').css('background-color', 'blue');
  }
})

Mula-mula, kami menggunakan acara resize() jQuery untuk mengesan perubahan dalam saiz tetingkap penyemak imbas. Kod dilaksanakan secara automatik apabila saiz tetingkap berubah.

Seterusnya, kami menggunakan kaedah width() dan height() jQuery untuk mendapatkan lebar dan ketinggian tetingkap penyemak imbas semasa. Kami boleh bertindak balas terhadap saiz tetingkap yang berbeza dengan sewajarnya.

Dalam contoh ini, kami menukar warna latar belakang halaman web secara dinamik kepada merah atau biru mengikut lebar tetingkap penyemak imbas. Apabila lebar tetingkap kurang daripada 768 piksel, tetapkan warna latar belakang kepada merah, jika tidak tetapkannya kepada biru.

Lagi Tindakan

Selain menukar warna latar belakang, terdapat banyak perkara lain yang boleh kami lakukan untuk bertindak balas terhadap peranti berbeza pengguna. Contohnya:

• Ubah suai saiz, warna dan kedudukan teks;
• Tunjukkan atau sembunyikan blok kandungan tertentu
• Laraskan saiz dan kedudukan imej;
• Helaian gaya tersuai dan banyak lagi.

Operasi ini boleh membantu kami memaparkan halaman dengan lebih baik pada peranti berbeza tanpa kehilangan responsif akibat penetapan peranti.

Nota

Walaupun mudah untuk menggunakan jQuery untuk menukar saiz tetingkap, anda perlu memberi perhatian kepada perkara berikut semasa menggunakannya:

• Cuba untuk elakkan menukar saiz tetingkap semasa proses Terlalu banyak operasi dilakukan dalam kod, yang akan menyebabkan masalah prestasi yang tidak perlu; daripada jQuery;
• Apabila kod yang bertindak balas kepada saiz tetingkap terlalu kompleks, kami mungkin perlu mempertimbangkan sama ada rangka kerja responsif khusus diperlukan untuk membantu pelaksanaan.
• Ringkasnya, menukar saiz tetingkap secara dinamik adalah teknologi yang sangat penting dan memainkan peranan yang sangat penting dalam reka bentuk responsif. Menggunakan jQuery untuk melaksanakan fungsi ini boleh membantu kami mencipta halaman web berkualiti tinggi dengan lebih mudah dan cepat.

Atas ialah kandungan terperinci jquery menukar saiz bentuk secara dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!