Bagaimanakah Saya Boleh Merekabentuk Halaman HTML untuk Dicetak sebagai Saiz A4?

Cara Reka Halaman HTML dengan Dimensi Kertas A4

Ramai pengguna menginginkan keupayaan untuk mencetak halaman HTML yang meniru dimensi dan margin daripada helaian bersaiz A4. Artikel ini meneroka teknik yang diperlukan untuk mencapai kesan ini.

Pertanyaan Media CSS untuk Cetakan

Kunci untuk mengawal dimensi bercetak halaman HTML terletak pada penggunaan media CSS pertanyaan. Pertanyaan ini menyasarkan media cetak dan membenarkan penggunaan gaya tertentu. Untuk pencetakan bersaiz A4, pertanyaan @media berikut boleh digunakan:

@media print {
    body {
        width: 21cm;
        height: 29.7cm;
        margin: 30mm 45mm 30mm 45mm;
    }
}

Kod ini menetapkan lebar dan tinggi halaman bercetak masing-masing kepada 21cm dan 29.7cm, sepadan dengan halaman A4. Selain itu, ia mentakrifkan jidar 30mm (atas dan bawah) dan 45mm (kiri dan kanan) untuk mencapai dimensi halaman yang diingini.

Pecah Halaman Seterusnya

Jika HTML kandungan melebihi saiz halaman yang ditentukan, halaman berikutnya mesti dibuat. Ini boleh dicapai dengan memasukkan pemisah halaman CSS. Contohnya:

div.chapter {
    page-break-after: always;
}

Kod ini memastikan setiap bab bermula pada halaman baharu.

Paparan Penyemak Imbas

Untuk mengoptimumkan paparan web halaman sambil mengekalkan dimensi A4 bercetak, buat fail CSS web yang berasingan atau ganti bahagian CSS cetakan. Contohnya:

@media screen {
    body {
        width: 80%;
        height: auto;
        margin: 20px;
    }
}

Kod ini menetapkan lebar yang dipaparkan kepada 80% daripada ruang penyemak imbas yang tersedia, dengan pelarasan ketinggian automatik. Margin juga dikurangkan kepada 20px untuk reka letak yang lebih mesra web.

Kesimpulan

Dengan melaksanakan pertanyaan media CSS dan mengurus pemisah halaman, adalah mungkin untuk mencipta Halaman HTML yang berkelakuan seperti dokumen bersaiz A4 apabila dicetak. Dengan memisahkan CSS cetakan dan web, halaman juga boleh mengekalkan paparan yang dioptimumkan untuk persekitaran tontonan yang berbeza.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Merekabentuk Halaman HTML untuk Dicetak sebagai Saiz A4?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!