欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS @media print 使用詳解

  發(fā)布時間：2025-03-18 15:40:48   作者： BillKu   我要評論
文章詳細(xì)介紹了CSS中的打印媒體查詢@mediaprint包括基本語法、常見使用場景和代碼示例,如隱藏非必要元素、調(diào)整字體和顏色、處理鏈接的URL顯示、分頁控制、調(diào)整邊距和背景等,還提供了測試方法和關(guān)鍵注意事項(xiàng),并分享了進(jìn)階技巧，感興趣的朋友一起看看吧

@media print 是 CSS 中的打印媒體查詢，用于定義僅在打印文檔時生效的樣式規(guī)則。通過它，你可以優(yōu)化網(wǎng)頁的打印效果，比如隱藏不必要的元素、調(diào)整布局、修改字體顏色等。下面我會結(jié)合代碼實(shí)例詳細(xì)講解。

一、基本語法

@media print {
  /* 在此處編寫打印時生效的 CSS 規(guī)則 */
  選擇器 {
    屬性: 值;
  }
}

二、常見使用場景 & 代碼示例

1. 隱藏非必要元素

打印時通常需要隱藏導(dǎo)航欄、廣告、按鈕等無關(guān)內(nèi)容。

@media print {
  .navbar, .ad-banner, .print-button {
    display: none !important;
  }
}

2. 調(diào)整字體和顏色

打印時建議使用深色字體（避免淺色文字不清晰），并優(yōu)先使用pt單位。

@media print {
  body {
    font-family: "Times New Roman", serif;
    font-size: 12pt;
    color: #000 !important; /* 強(qiáng)制黑色打印 */
  }
}

3. 處理鏈接的 URL 顯示

打印時讓超鏈接顯示完整的 URL（默認(rèn)不顯示）。

@media print {
  a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}

4. 分頁控制

避免內(nèi)容被截斷，控制分頁位置。

@media print {
  /* 避免在 h2 標(biāo)題前分頁 */
  h2 {
    page-break-before: avoid;
  }
  /* 禁止在段落中間分頁 */
  p {
    page-break-inside: avoid;
  }
  /* 在 footer 前強(qiáng)制分頁 */
  .footer {
    page-break-before: always;
  }
}

5. 調(diào)整邊距和背景

去掉背景圖/顏色（節(jié)省墨水），自定義頁邊距。

@media print {
  body {
    background: none !important;
    margin: 2cm; /* 設(shè)置打印邊距 */
  }
  /* 打印時強(qiáng)制顯示白色背景的元素 */
  .resume-section {
    background-color: white !important;
    -webkit-print-color-adjust: exact; /* Chrome/Safari */
    print-color-adjust: exact;
  }
}

三、完整代碼實(shí)例

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 常規(guī)樣式 */
    .nav { background: #333; color: white; padding: 10px; }
    .sidebar { float: right; width: 30%; background: #f0f0f0; }
    a { color: blue; }
    /* 打印樣式 */
    @media print {
      .nav, .sidebar { display: none; }
      body {
        font-size: 12pt;
        color: #000;
        margin: 1cm;
      }
      a::after { content: " (" attr(href) ")"; }
      .page-break { page-break-before: always; }
    }
  </style>
</head>
<body>
  <nav class="nav">導(dǎo)航欄（打印時隱藏）</nav>
  <div class="content">
    <h1>我的簡歷</h1>
    <p>聯(lián)系我：<a >個人網(wǎng)站</a></p>
    <div class="page-break"></div>
    <h2>工作經(jīng)歷</h2>
    <p>2020-2023：前端工程師</p>
  </div>
  <div class="sidebar">側(cè)邊欄（打印時隱藏）</div>
</body>
</html>

四、關(guān)鍵注意事項(xiàng)

測試方法：
無需實(shí)際打印，用瀏覽器「打印預(yù)覽」（快捷鍵 Ctrl/Cmd + P）即可調(diào)試。

單位選擇：
建議用 pt（點(diǎn)）、cm/mm（物理單位）而非 px，更符合紙張尺寸。

覆蓋默認(rèn)樣式：
打印樣式可能需要 !important 覆蓋原有樣式（但盡量少用）。

背景顏色處理：
瀏覽器默認(rèn)不打印背景色，如需顯示需強(qiáng)制設(shè)置：

-webkit-print-color-adjust: exact;
print-color-adjust: exact;

五、進(jìn)階技巧

自定義頁眉頁腳：
通過 @page 規(guī)則定義：

@page {
  margin: 2cm;
  @top-center {
    content: "我的簡歷";
  }
}

（注意：瀏覽器支持有限，不同瀏覽器效果可能不同）

多頁面不同樣式：
使用命名頁面：

.cover-page {
  page: cover; /* 指定頁面名稱 */
}
@page cover {
  margin: 5cm;
}

到此這篇關(guān)于CSS @media print 使用詳解的文章就介紹到這了,更多相關(guān)CSS @media print 使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論