Bagaimana untuk menukar saiz paparan dalam JavaScript

Dalam pembangunan web moden, JavaScript ialah teknologi yang sangat penting, yang boleh memberikan interaksi yang berkuasa dan tingkah laku dinamik. Satu aplikasi biasa ialah menukar saiz paparan.

Dalam halaman web, saiz paparan merujuk kepada lebar dan ketinggian tetingkap atau elemen penyemak imbas. Saiz ini mempengaruhi reka letak halaman, gaya dan paparan kandungan. Melalui kod JavaScript, kami boleh mengubah suai saiz ini secara dinamik untuk mencapai reka bentuk adaptif dan responsif.

Berikut ialah beberapa cara untuk menukar saiz paparan menggunakan JavaScript:

1. Gunakan sifat window.innerHeight dan window.innerWidth

Kembali ke semak imbas Tinggi dan lebar tetingkap penyemak imbas. Kita boleh membaca sifat ini melalui kod JavaScript dan menerapkannya pada elemen dalam paparan.

Sebagai contoh, kod berikut menetapkan ketinggian dan lebar elemen DIV kepada saiz tetingkap penyemak imbas:

var div = document.getElementById('myDiv');
div.style.height = window.innerHeight + 'px';
div.style.width = window.innerWidth + 'px';

2. Menggunakan pertanyaan media CSS

Pertanyaan media CSS ialah kaedah mentakrifkan gaya dalam CSS, yang boleh mengubah gaya elemen berdasarkan ciri dan atribut peranti pengguna. Kami boleh membuat, mengedit dan menggunakan pertanyaan media ini menggunakan kod JavaScript.

Sebagai contoh, kod berikut akan menambah helaian gaya pada halaman dan mentakrifkan pertanyaan media untuk peranti dengan lebar skrin lebih besar daripada 600px:

var style = document.createElement('style');
style.innerHTML = '@media screen and (min-width: 600px) { body { background-color: yellow; } }';

document.head.appendChild(style);

3. Gunakan acara ubah saiz

Apabila saiz tetingkap penyemak imbas berubah, penyemak imbas akan mencetuskan acara ubah saiz. Kami boleh mengubah suai saiz dan reka letak paparan secara dinamik dengan mendengar acara ini.

Sebagai contoh, kod berikut menetapkan ketinggian elemen DIV kepada separuh ketinggian tetingkap penyemak imbas dan memusatkan kedudukannya secara mendatar:

var div = document.getElementById('myDiv');

function resizeHandler() {
  div.style.height = window.innerHeight / 2 + 'px';
  div.style.left = (window.innerWidth - div.offsetWidth) / 2 + 'px';
}

window.addEventListener('resize', resizeHandler);

// 初始调用一次以确保视图始终处于正确的大小和位置
resizeHandler();

Dengan kaedah di atas, kita boleh dengan mudah Gunakan JavaScript untuk mengubah saiz paparan agar sesuai dengan peranti dan keperluan pengguna yang berbeza. Ini menyediakan cara yang sangat mudah untuk mereka bentuk tapak web responsif dan adaptif.

Atas ialah kandungan terperinci Bagaimana untuk menukar saiz paparan dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!