A4紙網頁打印

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>A4紙網頁打印</title>
  <!-- 去除頁眉頁腳 -->
  <style media="print">
    @page {
      /* auto is the initial value */
      size: auto;  
      /* this affects the margin in the printer settings */
      margin: 5mm; 
    }
  </style>
</head>
<!-- 
  在公制長度單位與屏幕分辨率進行換算時,必須用到一個DPI(Dot Per Inch)指標。 
  經過我仔細的測試,發現了網頁打印中,默認採用的是96dpi,並非傳聞的72dpi 
  A4紙張的尺寸是210×297mm,按1英寸=25.41mm換算,即8.264×11.688英寸 
  所以,A4紙96dpi下的分辨率是794×1123,這就是我們在製作網頁的時候需要的象素。 
  但是打印機是無法滿幅打印的,總要有頁邊距,所以我們在製作網頁的時候必須減去頁邊距。

  A4紙的尺寸:210×297mm 
  A3紙的尺寸:297×420mm
 -->
<body>
  <!-- 打印頁邊距設定爲 0mm 時,網頁內最大元素的分辨率:794×1123 -->
  <div style="width:794px;height:1123px;border:1px solid #000000;margin:0 auto;page-break-after:always;"></div>
  <!-- 打印頁邊距設定爲 5mm 時,網頁內最大元素的分辨率:756×1086 -->
  <div style="width:756px;height:1086px;border:1px solid #000000;margin:0 auto;page-break-after:always;"></div>
  <!-- 打印頁邊距設定爲 19.05mm 時,網頁內最大元素的分辨率:649×978  -->
  <div style="width:649px;height:978px;border:1px solid #000000;margin:0 auto;"></div>
</body>
</html>

發佈了169 篇原創文章 · 獲贊 62 · 訪問量 77萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章