Cara Mempunyai Rupa dan Rasa HTML pada peranti Skrin-tutorial css-php.cn

Cara Mempunyai Rupa dan Rasa HTML pada peranti Skrin

Susan Sarandon

Lepaskan： 2024-09-21 06:26:32

asal

962 orang telah melayarinya

How to Have the Look and Feel of An HTML on Screen devices

Cara Mempunyai Rupa dan Rasa A4 dalam HTML pada Peranti Skrin

Saya mula membina resume saya menggunakan halaman HTML lama dan dengan cepat menyedari bahawa ia tidak berfungsi di luar kotak apabila dibuka pada skrin. Kandungan hanya mengalir tanpa henti tanpa sebarang pemisah halaman, dan ia pastinya tidak kelihatan seperti dokumen A4. Untuk membetulkannya, saya terpaksa menggunakan beberapa helah, termasuk beberapa CSS dan sedikit JavaScript.

Matlamat saya ialah:

Untuk menjadikan resume saya kelihatan sama pada skrin seperti semasa dicetak.
Untuk memaparkan halaman berasingan pada skrin, dengan cara yang sama dokumen PDF atau Dokumen Google melakukannya.

Cabaran Semasa Membina Resume dalam HTML

Apabila saya mula menulis resume saya, saya segera menyedari bahawa penyemak imbas pada peranti skrin tidak menghormati dimensi halaman seperti A4. Sebaliknya, mereka hanya mengalirkan kandungan secara berterusan, yang bermaksud teks dan bahagian boleh tumpah tanpa sebarang pemisah halaman. Untuk membuat halaman yang berbeza berdasarkan dimensi A4, saya terpaksa mengendalikan pemisah halaman secara manual apabila kandungan melebihi ketinggian halaman A4 biasa.

Penyelesaian utama yang melibatkan penggunaan CSS @media cetak dan ciri pemisah halaman untuk mengawal cara kandungan berfungsi apabila ia terlalu panjang untuk satu halaman dan untuk menggunakan JavaScript untuk mengendalikan kandungan dinamik pada skrin.

1. Pecah Halaman Automatik dengan CSS (untuk Cetakan)

Untuk memastikan kandungan mengalir dengan betul apabila dicetak, saya menggunakan page-break-inside: avoid property. Sifat ini menghalang pemisahan elemen penting seperti tajuk atau perenggan besar antara dua halaman, membolehkan penyemak imbas memecahkan kandungan secara automatik kepada halaman mengikut keperluan.

Contoh HTML untuk Mencetak:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>A4 Styled Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="page">
    <h1>Title of Page 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  </div>

  <div class="page">
    <h1>Title of Page 2</h1>
    <p>Content will automatically break into new pages for printing...</p>
  </div>
</body>
</html>

Salin selepas log masuk

CSS untuk Mencetak:

/* Define page layout for A4 size */
@media print {
  body {
    margin: 0;
    padding: 0;
  }

  .page {
    width: 210mm;
    height: 297mm;
    margin: 0;
    padding: 20mm;
    page-break-after: always; /* Automatically breaks after each page */
    box-shadow: none;
    overflow: visible; /* Ensures content flows properly when printing */
  }

  /* Prevent page breaks inside headers or large paragraphs */
  h1, h2, h3, p {
    page-break-inside: avoid;
  }
}

Salin selepas log masuk

Bagaimana CSS Ini Berfungsi:

pemecah-halaman-selepas: sentiasa; memastikan kandungan akan masuk ke halaman baharu selepas setiap pembahagian .halaman dalam mod cetakan.
page-break-inside: elakkan; menghalang pengepala atau bahagian yang besar daripada dipisahkan dengan janggal antara dua halaman, yang penting untuk mengekalkan rupa yang bersih dan profesional apabila dicetak.

2. Mengendalikan Pecah Halaman pada Skrin dengan JavaScript

Walaupun CSS boleh mengendalikan pemisah halaman untuk pencetakan, peranti skrin tidak berfungsi dengan cara yang sama. Penyemak imbas tidak secara automatik memecahkan kandungan ke dalam halaman yang berbeza pada skrin, jadi saya memerlukan JavaScript untuk mengesan apabila kandungan melebihi saiz halaman A4 dan membahagikannya kepada halaman baharu secara dinamik.

Begini cara saya menguruskannya:

JavaScript untuk Pemisahan Halaman Dinamik:

window.onload = function () {
  const pages = document.querySelectorAll('.page');

  pages.forEach(page => {
    if (page.scrollHeight > page.clientHeight) {
      splitPageContent(page);
    }
  });
};

function splitPageContent(page) {
  const newPage = document.createElement('div');
  newPage.classList.add('page');

  const contentToMove = page.innerHTML.slice(page.clientHeight / 2); 
  newPage.innerHTML = contentToMove;
  page.innerHTML = page.innerHTML.slice(0, page.clientHeight / 2);

  // Insert the new page into the DOM after the current page
  page.parentNode.insertBefore(newPage, page.nextSibling);
}

Salin selepas log masuk

Mengapa JavaScript Diperlukan:

Pada skrin, tidak seperti cetakan, teks tidak mengalir secara automatik dari satu div .page ke seterusnya apabila ia melimpah. Penyemak imbas hanya membiarkan kandungan tumpah melebihi sempadan halaman. Dengan kod JavaScript di atas, saya mengesan apabila kandungan melimpah dan membahagikannya kepada halaman baharu, meniru pengalaman berbilang halaman yang anda jangkakan dalam PDF atau Dokumen Google.

3. Memastikan Aliran Halaman Konsisten pada Skrin dan Cetakan

Dengan pendekatan ini, kandungan berfungsi secara konsisten merentas peranti:

Pada Skrin: JavaScript mengesan limpahan kandungan dan mencipta div .halaman tambahan seperti yang diperlukan. Ini meniru pengalaman melihat dokumen A4, di mana anda boleh menatal antara halaman yang dibahagikan dengan kemas.
Dalam Cetakan: CSS @media cetak dan ciri pemisah halaman mengendalikan pemisah halaman automatik untuk pencetakan, jadi dokumen anda akan kelihatan sama seperti digilap di atas kertas.

Kesimpulan

Membina dokumen HTML yang meniru rupa dan rupa halaman A4 pada peranti skrin memerlukan gabungan CSS dan JavaScript. Walaupun CSS sahaja boleh mengendalikan aspek pencetakan dengan berkesan, JavaScript adalah penting untuk mengurus pemisah halaman pada skrin. Dengan menggabungkan kedua-duanya, anda boleh memastikan pengalaman yang lancar, dengan teks mengalir dengan kemas merentasi halaman, pada skrin dan cetakan.

Atas ialah kandungan terperinci Cara Mempunyai Rupa dan Rasa HTML pada peranti Skrin. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!