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

CSS @media print 使用詳解

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

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

一、基本語(yǔ)法

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

二、常見使用場(chǎng)景 & 代碼示例

1. 隱藏非必要元素

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

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

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

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

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

3. 處理鏈接的 URL 顯示

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

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

4. 分頁(yè)控制

避免內(nèi)容被截?cái)?，控制分?yè)位置。

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

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

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

@media print {
  body {
    background: none !important;
    margin: 2cm; /* 設(shè)置打印邊距 */
  }
  /* 打印時(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)航欄（打印時(shí)隱藏）</nav>
  <div class="content">
    <h1>我的簡(jiǎn)歷</h1>
    <p>聯(lián)系我：<a >個(gè)人網(wǎng)站</a></p>
    <div class="page-break"></div>
    <h2>工作經(jīng)歷</h2>
    <p>2020-2023：前端工程師</p>
  </div>
  <div class="sidebar">側(cè)邊欄（打印時(shí)隱藏）</div>
</body>
</html>

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

測(cè)試方法：
無需實(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)階技巧

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

@page {
  margin: 2cm;
  @top-center {
    content: "我的簡(jiǎn)歷";
  }
}

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

多頁(yè)面不同樣式：
使用命名頁(yè)面：

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

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

相關(guān)文章

最新評(píng)論