Cara menukar javascript mengikut saiz halaman

JavaScript ialah bahasa pengaturcaraan yang digunakan secara meluas untuk interaktiviti pada halaman web. Apabila membangunkan halaman web, kita sering perlu mengubah cara kandungan web dipaparkan berdasarkan saiz halaman. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk menukar reka letak dan gaya elemen halaman web mengikut saiz halaman.

1. Dapatkan saiz halaman

Pertama, kita perlu mendapatkan saiz halaman. Anda boleh menggunakan kod berikut untuk mendapatkan lebar dan ketinggian halaman:

var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;

Sifat innerWidth dan innerHeight bagi objek tetingkap digunakan di sini, yang masing-masing mewakili lebar dan ketinggian halaman yang boleh dilihat. Perlu diingatkan bahawa saiz halaman yang diperoleh melalui kaedah ini mungkin dipengaruhi oleh bar alat penyemak imbas dan bar skrol.

Jika anda ingin mendapatkan lebar dan ketinggian sebenar kandungan halaman web, anda boleh menggunakan kod berikut:

var pageWidth = document.documentElement.scrollWidth;
var pageHeight = document.documentElement.scrollHeight;

Sifat scrollWidth dan scrollHeight bagi objek dokumen digunakan di sini, yang mana mewakili lebar dan ketinggian sebenar kandungan halaman web masing-masing, termasuk bahagian kandungan yang tidak kelihatan. Perlu diingat bahawa jika halaman web tidak mempunyai kandungan yang mencukupi, lebar dan ketinggian sebenar mungkin lebih kecil daripada bahagian yang boleh dilihat.

2. Tukar kandungan halaman web mengikut saiz halaman

Selepas mendapat saiz halaman, kita boleh menukar kandungan halaman web mengikut saiz halaman secara dinamik. Berikut ialah beberapa senario aplikasi biasa:

1. Tukar reka letak halaman web mengikut lebar halaman

Di bahagian mudah alih, kami biasanya menukar reka letak halaman kepada susun atur menegak untuk menyesuaikan paparan Potret skrin telefon mudah alih. Pada desktop, kami biasanya menggunakan susun atur mendatar. Kod berikut boleh memilih reka letak yang berbeza berdasarkan lebar halaman:

if (pageWidth < 768) {
  // 移动端布局
  // ...
} else {
  // 桌面端布局
  // ...
}

Kod ini menggunakan idea pertanyaan media untuk memilih kaedah reka letak yang berbeza dengan menilai lebar halaman. Kod susun atur yang sepadan boleh ditulis dalam pernyataan if.

2. Tukar saiz fon halaman web mengikut lebar halaman

Di bahagian mudah alih, disebabkan skrin telefon bimbit yang lebih kecil, saiz fon halaman web perlu dikurangkan dengan sewajarnya untuk memudahkan pembacaan pengguna. Kod berikut boleh melaraskan saiz fon halaman web secara automatik mengikut lebar halaman:

if (pageWidth < 768) {
  // 移动端字体大小
  document.body.style.fontSize = "14px";
} else {
  // 桌面端字体大小
  document.body.style.fontSize = "16px";
}

Kod ini menggunakan atribut gaya objek dokumen untuk menetapkan gaya CSS dalam halaman web. Gunakan pernyataan if untuk memilih saiz fon yang berbeza berdasarkan lebar halaman.

3. Tukar kedudukan elemen halaman web mengikut ketinggian halaman

Dalam sesetengah halaman web yang memerlukan penatalan, kita boleh mengawal kedudukan elemen halaman web berdasarkan ketinggian halaman. Sebagai contoh, anda boleh membuat butang "kembali ke atas" muncul apabila anda menatal ke bawah. Kod berikut boleh mencapai fungsi ini:

window.onscroll = function() {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > pageHeight * 0.8) {
    // 显示“返回顶部”按钮
    document.getElementById("back-to-top").style.display = "block";
  } else {
    // 隐藏“返回顶部”按钮
    document.getElementById("back-to-top").style.display = "none";
  }
}

Kod ini menggunakan acara onscroll objek tetingkap, yang boleh mencetuskan kod yang sepadan apabila halaman web menatal. Dengan mengira jarak tatal tatal Atas, tentukan sama ada ia telah menatal ke bahagian bawah halaman. Jika jarak tatal melebihi 80% ketinggian halaman, butang "Kembali ke Atas" dipaparkan, jika tidak, ia disembunyikan.

3. Ringkasan

JavaScript ialah salah satu alatan biasa untuk membangunkan halaman web dinamik. Apabila menukar kandungan halaman web berdasarkan saiz halaman, kami boleh menggunakan JavaScript untuk mendapatkan saiz halaman dan menukar reka letak, gaya dan kedudukan elemen halaman web berdasarkan saiz halaman secara dinamik. Melalui penggunaan skrip JavaScript yang fleksibel, halaman web boleh dipaparkan dengan baik pada peranti dan saiz skrin yang berbeza, meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Cara menukar javascript mengikut saiz halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!