Bagaimana menyelesaikan masalah ketinggian dengan menyesuaikan unit REM dalam reka bentuk penyesuaian?

Reka bentuk penyesuaian: bijak menyelesaikan masalah pelarasan ketinggian

Dalam reka bentuk responsif, kawalan tepat elemen halaman ketinggian sering menjadi sakit kepala. Terutama apabila bar alat di bahagian atas penyemak imbas mengambil ruang, mengakibatkan ketinggian yang kelihatan sebenarnya kurang daripada ketinggian draf reka bentuk, bagaimana untuk memastikan bahawa ketinggian elemen halaman selaras dengan draf reka bentuk telah menjadi cabaran utama bagi pemaju.

Anggapkan bahawa saiz draf reka bentuk adalah 1920x1080 piksel, tetapi kewujudan bar alat penyemak imbas menjadikan ketinggian visual sebenar kurang daripada 1080 piksel. Jika anda menggunakan unit REM secara langsung dan menetapkan font-size body mengikut lebar draf reka bentuk, susun atur halaman mungkin berat sebelah.

Anda mungkin telah mencuba skim REM berdasarkan penyesuaian lebar:

 Eksport const selfAdapter = () => {
  Biarkan DesignWidth = 1920; // Lebar draf reka bentuk Let html = document.documentElement;
  biarkan ww = html.clientWidth; // Window Lebar Let Rem = (WW * 100) / DesignWidth;
  html.style.fontsize = rem "px";

  const resize = () => {
    Let Rem = (WW * 100) / DesignWidth;
    html.style.fontsize = rem "px";
  };

  window.addeventListener ("saiz semula", saiz semula, palsu);
};

Skim ini mengira nilai REM berdasarkan lebar tetingkap, mengabaikan perubahan ketinggian. Untuk menangani perbezaan ketinggian yang disebabkan oleh bar alat penyemak imbas, strategi yang lebih berkesan adalah untuk mengira nilai REM berdasarkan ketinggian visual tetingkap.

Kod yang diubahsuai adalah seperti berikut:

 Eksport const selfAdapter = () => {
  Biarkan DesignHeight = 1080; // Reka bentuk draf ketinggian biarkan html = document.documentElement;
  Biarkan wh = html.clientHeight; // ketinggian tetingkap biarkan rem = (wh * 100) / designHeight;
  html.style.fontsize = rem "px";

  const resize = () => {
    Let Rem = (Wh * 100) / DesignHeight;
    html.style.fontsize = rem "px";
  };

  window.addeventListener ("saiz semula", saiz semula, palsu);
};

Dengan menggunakan clientHeight untuk mendapatkan ketinggian visual tetingkap dan mengira nilai REM berdasarkan ketinggian draf reka bentuk, sisihan ketinggian halaman yang disebabkan oleh bar alat penyemak imbas dapat diselesaikan dengan berkesan, memastikan bahawa ketinggian elemen halaman adalah konsisten dengan draf reka bentuk, dan mengelakkan penyelewengan UI. Ini membolehkan 100px dalam draf reka bentuk ditukar kepada 1REM dengan tepat dalam penyemak imbas.

Atas ialah kandungan terperinci Bagaimana menyelesaikan masalah ketinggian dengan menyesuaikan unit REM dalam reka bentuk penyesuaian?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!