相关文章推荐
小百科
›
How to Use CSS Media Queries to Make Printable Web Pages - Sympli
css
聪明伶俐的电影票
2 年前
</noscript><div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><main class="main has-navbar-fixed-top page--blog-slug"><header class="header is-fixed-top is-small"><div class="container is-fluid-max"><nav role="navigation" aria-label="main navigation" class="navbar"><div class="navbar-brand"><a href="/" class="navbar-item nuxt-link-active"><span class="simpli-logo"><svg width="118" height="32" viewbox="0 0 118 32" xmlns="http://www.w3.org/2000/svg" class="simpli-logo__img"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.625 0L12.3519 1.23965L14.7195 3.5626L3.62961 14.3398L1.29549 12.1062L0 13.3011L2.34529 15.5347L0 17.8689L1.26199 19.0973L3.60728 16.8079L14.7753 27.6521L12.43 29.8857L13.6808 31.103L16.0261 28.8694L18.3938 31.17L19.6669 29.9303L17.3105 27.6297L28.4003 16.8414L30.7568 19.142L31.9964 17.8689L29.6288 15.6353L31.8624 13.4016L30.6116 12.1843L28.378 14.3509L17.2099 3.50676L19.4436 1.27316L18.2486 0.134016L16.015 2.31178L13.625 0ZM4.8916 15.5682L15.9815 4.77992L27.1495 15.6353L16.0596 26.4124L4.8916 15.5682Z" fill="#FF6C55"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M15.9815 7.66138L24.1453 15.6019L16.0038 23.52L7.85114 15.5795L15.9815 7.66138Z" fill="#73ABD4"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M117.019 5.42782L115.522 3.96481L114.026 5.42782L115.522 6.87967L117.019 5.42782ZM114.539 24.6592H116.516V9.43715L114.539 9.73869V24.6592ZM65.3107 9.52649L61.9603 21.5656C61.48 20.5829 57.3925 10.3976 57.1804 9.52649H55.0138C55.3265 10.7103 58.7327 19.2204 59.3693 20.5493C59.816 21.4763 60.5643 22.9281 61.2008 24.1231L59.4921 30.232H61.5694L65.7797 15.1105C66.3381 13.3236 66.8965 11.6373 67.3321 9.58233V9.52649H65.3107ZM110.162 1.25098L108.196 1.60835V20.9067C108.196 20.9626 108.196 21.0072 108.196 21.0631V24.6592H110.162V17.7685V1.25098ZM103.919 19.3544C103.753 20.0811 103.445 20.7679 103.014 21.3758C102.592 21.9579 102.031 22.4261 101.383 22.7383C100.601 23.0877 99.7496 23.2557 98.893 23.2297C98.4317 23.2315 97.9715 23.1866 97.5193 23.0957C97.1084 23.0137 96.705 22.8979 96.3132 22.7495C95.9797 22.6223 95.6551 22.4731 95.3415 22.3027C95.099 22.1628 94.8641 22.01 94.638 21.8448V10.956C95.099 10.8265 95.5695 10.7332 96.0451 10.6768C96.8405 10.5657 97.6433 10.5172 98.4463 10.5316C99.2214 10.4965 99.9952 10.6255 100.717 10.9104C101.439 11.1952 102.092 11.6294 102.634 12.1845C103.767 13.4832 104.337 15.1783 104.22 16.8974C104.221 17.7244 104.128 18.5487 103.941 19.3544H103.919ZM104.153 10.9337C103.439 10.2171 102.578 9.66453 101.629 9.3143C100.604 8.93356 99.5175 8.74429 98.4239 8.7559C97.253 8.73888 96.083 8.82859 94.9283 9.02393C94.1731 9.17382 93.4273 9.36773 92.6947 9.60467V30.232H94.705V23.7434C95.2307 24.0876 95.7972 24.3652 96.3913 24.5698C97.2741 24.8767 98.2043 25.0242 99.1387 25.0054C100.201 25.0249 101.255 24.8194 102.232 24.4023C103.088 24.0146 103.85 23.4471 104.466 22.7383C105.109 21.9897 105.588 21.1147 105.873 20.1696C106.204 19.111 106.366 18.0066 106.353 16.8974C106.371 15.7369 106.178 14.5828 105.784 13.4911C105.434 12.5349 104.886 11.6633 104.175 10.9337H104.153ZM89.1209 10.7661C88.6842 10.1192 88.0775 9.60525 87.3676 9.2808C86.4253 8.89877 85.413 8.71991 84.3969 8.7559C83.7147 8.73655 83.0326 8.79652 82.3643 8.93459C81.818 9.05892 81.2836 9.23082 80.7673 9.44832C80.3788 9.61343 80.0052 9.81145 79.6504 10.0402L79.0474 10.4423C78.4902 9.82484 77.7954 9.34736 77.0193 9.04855C76.2431 8.74974 75.4075 8.63801 74.5802 8.7224C73.3261 8.69849 72.0729 8.79951 70.8389 9.02393C69.8784 9.22496 69.0967 9.40365 68.5047 9.57117V24.648H70.515V10.956C70.9338 10.8266 71.3638 10.7369 71.7993 10.688C72.6172 10.5763 73.442 10.524 74.2675 10.5316C74.9865 10.5058 75.7026 10.6353 76.367 10.9113C76.8787 11.1528 77.3066 11.5417 77.5955 12.0281C77.9157 12.6031 78.1135 13.2381 78.1763 13.8932C78.2721 14.7796 78.3169 15.6708 78.3103 16.5624V24.648H80.4099V15.7806C80.4119 15.0897 80.3672 14.3994 80.2759 13.7145C80.191 13.1141 80.0489 12.5233 79.8515 11.95L80.3652 11.5926C80.6539 11.4028 80.9607 11.2419 81.281 11.1124C81.7045 10.9287 82.1462 10.7902 82.5988 10.6991C83.1532 10.5824 83.7187 10.5262 84.2852 10.5316C84.9787 10.5082 85.6689 10.6378 86.3066 10.9113C86.8091 11.1536 87.2259 11.5432 87.5016 12.0281C87.8089 12.6069 87.9986 13.2408 88.06 13.8932C88.1559 14.7796 88.2006 15.6708 88.194 16.5624V24.648H90.2154V15.9369C90.2172 14.9651 90.1463 13.9945 90.0032 13.0333C89.8825 12.2385 89.5973 11.4778 89.1656 10.7997L89.1209 10.7661ZM53.0258 15.3004C52.4242 14.817 51.7637 14.4117 51.0603 14.0942C50.3008 13.748 49.4967 13.413 48.648 13.0668C47.7992 12.7206 47.2966 12.5195 46.6936 12.2515C46.1412 12.021 45.6167 11.7288 45.13 11.3804C44.7058 11.0891 44.3512 10.7078 44.0914 10.2636C43.8275 9.76551 43.6967 9.2077 43.7117 8.64422C43.697 8.09052 43.8198 7.54181 44.0691 7.04719C44.3052 6.60347 44.6418 6.22105 45.0519 5.93039C45.4979 5.62559 45.9984 5.40946 46.526 5.29381C47.1421 5.15865 47.7716 5.09495 48.4023 5.10395C49.3414 5.09257 50.2774 5.21287 51.1831 5.46133C51.9746 5.66438 52.7286 5.99237 53.4167 6.43295L54.165 4.71307C53.852 4.5018 53.5144 4.3293 53.1599 4.19934C52.7246 4.02096 52.2766 3.87537 51.8197 3.76379C51.3068 3.61384 50.7844 3.49818 50.2562 3.41758C49.6704 3.35294 49.0806 3.33055 48.4916 3.35057C46.6969 3.23003 44.912 3.70075 43.4102 4.69073C42.7953 5.16651 42.3067 5.78604 41.9873 6.49486C41.668 7.20369 41.5276 7.98012 41.5786 8.7559C41.5611 9.45981 41.6904 10.1596 41.9583 10.8108C42.2219 11.3984 42.6018 11.9264 43.0751 12.3632C43.6176 12.8472 44.2223 13.2566 44.8732 13.5805C45.5768 13.9379 46.3697 14.2841 47.2631 14.6303L49.2845 15.4232C49.8873 15.6498 50.4579 15.9539 50.9821 16.3278C51.4716 16.6657 51.8798 17.1082 52.1771 17.6233C52.4995 18.2109 52.6577 18.8744 52.635 19.5442C52.6799 20.1053 52.5742 20.6682 52.3288 21.1748C52.0834 21.6813 51.7071 22.1131 51.239 22.4256C50.0431 23.0882 48.6838 23.398 47.319 23.319C46.6572 23.3253 45.996 23.2767 45.3422 23.1738C44.7938 23.0877 44.2525 22.9608 43.7229 22.7941C43.3089 22.6642 42.9025 22.5113 42.5055 22.3362C42.1593 22.1799 41.8801 22.0347 41.6679 21.9118L40.9867 23.6987C41.2689 23.8531 41.5597 23.991 41.8578 24.112C42.2992 24.3003 42.7548 24.4534 43.2203 24.5698C43.8216 24.7376 44.4335 24.8644 45.0519 24.9496C45.7917 25.055 46.5382 25.1072 47.2855 25.1059C49.2223 25.2046 51.1432 24.7098 52.7913 23.6876C53.4635 23.2093 54.0029 22.5677 54.3585 21.8232C54.7141 21.0788 54.8743 20.256 54.8239 19.4325C54.8487 18.5893 54.6766 17.7519 54.3213 16.9867C54.0047 16.3356 53.5514 15.7604 52.9923 15.3004H53.0258Z" fill="#FF6C55"/></svg> <span class="simpli-logo__title sr-only">Simpli.io</span></span></a><a role="button" aria-label="menu" tabindex="0" class="navbar-burger burger"><span aria-hidden="true"/> <span aria-hidden="true"/> <span aria-hidden="true"/></a><a role="button" aria-label="menu" tabindex="0" class="navbar-login burger"><svg xmlns="http://www.w3.org/2000/svg" class="icon sprite-icons"><use href="/_nuxt/f8bcce133b791034bec5d7c5a39b7145.svg#i-person" xlink:href="/_nuxt/f8bcce133b791034bec5d7c5a39b7145.svg#i-person"/></svg></a></div><div class="navbar-menu"><div class="navbar-start"><div class="navbar-item has-dropdown is-expanded navbar-item--solutions"><a aria-haspopup="true" tabindex="0" class="navbar-link">Solutions</a> <div class="navbar-dropdown" style="display:;"><div class="container"><div class="navbar-item"><a href="/versions" class="navbar-link"> Sympli Versions <span class="navbar-text">Work collaboratively without overwriting or losing previous versions of your work</span></a></div><div class="navbar-item"><a href="/handoff" class="navbar-link"> Sympli Handoff <span class="navbar-text">Allow engineers to export design specifications directly from approved design files</span></a></div></div></div></div><div class="navbar-item has-dropdown is-expanded navbar-item--resources"><a aria-haspopup="true" tabindex="0" class="navbar-link">Resources</a> <div class="navbar-dropdown" style="display:;"><div class="container"><div class="navbar-item"><a href="/downloads" class="navbar-link"> Downloads <span class="navbar-text">Download Apps &amp; Plugins and learn how to install and use them</span></a></div><div class="navbar-item"><a href="/testimonials" class="navbar-link"> Case Studies <span class="navbar-text">See how our clients leveraged Sympli to improve their output</span></a></div><div class="navbar-item"><a href="/blog" class="navbar-link nuxt-link-active"> <span class="navbar-text">Stay up to date with the latest news, tips and tricks</span></a></div><div class="navbar-item has-dropdown is-expanded navbar-item--features"><a aria-haspopup="true" tabindex="0" class="navbar-link">Features</a> <div class="navbar-dropdown" style="display:;"><div class="container"><div class="navbar-item"><a href="/design-systems" class="navbar-link"> Design Systems Version Management Self-Hosted Option Pricing Enterprise <!----></a></div></div><div class="navbar-end"><div class="navbar-item has-dropdown is-hidden-touch"><a aria-haspopup="true" tabindex="0" class="navbar-link">Sign up</a> <div class="navbar-dropdown" style="display:;"><div class="container"><div class="navbar-item is-small"><a href="https://app-versions.sympli.io/signup" class="navbar-link">Sympli Versions</a></div> <div class="navbar-item is-small"><a href="https://app.sympli.io/signup" class="navbar-link">Sympli Handoff</a></div></div></div></div> <div class="navbar-item"><div class="buttons mr-0 ml-3"><button type="button" class="button is-danger is-hidden-desktop"><!----><span>Start 30-day Trial</span><!----></button> <a href="/downloads" type="button" class="button is-primary is-small is-hidden-touch"><!----><span>Download now</span><!----></a></div></div></div></div><div class="navbar-menu is-secondary is-hidden-desktop"><div class="navbar-login-start"><div class="navbar-item"><a href="https://app-versions.sympli.io" class="navbar-link">Sympli Versions</a></div> <div class="navbar-item"><a href="https://app.sympli.io" class="navbar-link">Sympli Handoff</a></div></div></div></nav></div></header> <article data-v-86a5c66e=""><div class="container is-fluid-max" data-v-86a5c66e=""><section class="section" data-v-86a5c66e=""><div class="columns is-multiline is-centered" data-v-86a5c66e=""><div class="column is-12" data-v-86a5c66e=""><div class="article-header" data-v-86a5c66e=""><h1 class="article-header__title title has-text-centered is-1 is-spaced" data-v-86a5c66e=""> CSS Media for Printable Webpages </h1> <a href="/blog/author/daniel" class="media post__author" data-v-86a5c66e=""><div class="media-left" data-v-86a5c66e=""><figure title="Daniel Schwarz" class="b-image-wrapper is-48x48 avatar image" data-v-86a5c66e=""><!----><img src="//www.gravatar.com/avatar/7ba2dc4a8a6c5c08b49bf00a55f322d7?s=250&amp;d=mm&amp;r=x" loading="lazy" class="is-rounded"/><!----><!----></figure></div> <div class="media-content" data-v-86a5c66e=""><div class="title is-5" data-v-86a5c66e="">Daniel Schwarz</div></div></a> <div class="article-header__data" data-v-86a5c66e="">November 9, 2020</div> <div class="article-header__image" data-v-86a5c66e=""><img src="https://sympli-blog-content.s3.amazonaws.com/dev/2017/Oct/css_for_print-1508870524953.png" alt="CSS Media for Printable Webpages" data-v-86a5c66e=""/></div></div></div> <div class="column is-8 is-6-fullhd" data-v-86a5c66e=""><div class="post__content content" data-v-86a5c66e=""><p><br/>Webpages can be <em>printed</em>, but you probably knew that already. You probably don't do it very often, because…well, they're often ugly, too long, or a complete mess. But what you might not have known, is that we can define separate <a href="https://sympli.io/blog/4-new-ish-css-properties-you-can-start-using-and-why/">CSS styles</a> using <strong>media queries</strong> for webpages that translate to a Letter or A4 document.</p><p>Websites that sells tickets do this often (<em>think: boarding passes, entrance tickets, proof of purchase, invoices, et cetera</em>), but it's not the norm for everyday content, which is a shame because users do attempt to make content available offline more than you think (<em>i.e. before a flight, as a printable reference, et cetera</em>).</p><p>Let's take a quick look at how we can write media queries for printable and exportable content. It's super-easy, it'll only take a minute! We'll use this <u><a href="https://blog.mrdaniels.ch/warz/adobe-xd-keyboard-shortcuts/">Adobe XD keyboard shortcut cheatsheet</a></u> from my blog/website as an example.</p><p>Here's what the article looks like on the web:</p><figure class="kg-card kg-image-card"><img src="https://sympli-blog-content.s3.amazonaws.com/dev/2017/Oct/01-1508870899785.png" class="kg-image" alt="Article on the web"/></figure><p>And here's what it looks like as a PDF, before CSS optimization:</p><p><em>FYI: you can print from the web using the keyboard shortcut <strong>Ctrl/cmd+P</strong></em>.</p><figure class="kg-card kg-image-card"><img src="https://sympli-blog-content.s3.amazonaws.com/dev/2017/Oct/02-1508870981439.png" class="kg-image" alt="Printing from the web"/></figure><h2 id="step-1-css-media-queries-for-print">Step 1: CSS Media Queries for Print</h2><p>First of all, we define the media query:</p><pre><code>@media print { /* styles here */ </code></pre><p>Assuming that this appears at the bottom of your CSS stylesheet, most styles within the media query for print should overwrite anything else that exists with ease.</p><p>If not, try using the <code>!important</code> rule.</p><h2 id="step-2-hiding-redundancy">Step 2: Hiding Redundancy</h2><p>When downloading webpages as PDF, users don't need:</p><ul><li>UI elements</li><li>Header/footer</li><li>Sidebar content</li><li>Forms and CTAs</li><li><em>Et cetera</em></li></ul><p>We need to hide those elements using <code>;</code>.</p><p>Our code then becomes (<em>as an example</em>):</p><pre><code>@media print { header, footer, aside, form, … { display: none; </code></pre><p>Our example then looks like this:</p><figure class="kg-card kg-image-card"><img src="https://sympli-blog-content.s3.amazonaws.com/dev/2017/Oct/03-1508871067997.png" class="kg-image" alt="CSS media query optimization"/></figure><p>Not bad, but there's some unwanted spacing at the top.</p><p>We'll want to "reset" this spacing, which won't necessarily be on the <code>&lt;body&gt;</code> tag. In my case it was a <code>margin:</code> on the <code>&lt;article&gt;</code> element, hence:</p><pre><code>@media print { header, footer, aside, form, … { display: none; article { width:100%!important; padding:0!important; margin:0!important; </code></pre><h2 id="step-3-customizing-page-margins">Step 3: Customizing Page Margins</h2><p>Browsers are actually quite efficient when it comes to redefining page margins and stacking content. That being said, you might want to define your own margins, which is reasonably easy to do. Just remember to use <code>cm</code> instead of <code>px</code>!</p><p>Our code then becomes:</p><pre><code>@media print { header, footer, aside, form, … { display: none; article { width:100%!important; padding:0!important; margin:0!important; @page { margin: 2cm; </code></pre><p>As you can see from the code example above, margins are defined using the <code>@page</code> at-rule, <em>not</em> by adding margins to the <code>&lt;body&gt;</code> element, since the <code>&lt;body&gt;</code> only exists <em>once</em> and spans the height of <em>all the pages collectively</em>. With this declarative we can even define separate margins for first, last, left and right pages (in the event that said exportable spans more than a singular page), for example:</p><pre><code>@page:first { margin: 0cm; @page:last { margin: 5cm; @page:left { margin: 2cm 1.5cm 2cm 2cm; @page:right { margin: 2cm 2cm 2cm 1.5cm; </code></pre><h2 id="step-4-handling-links">Step 4: Handling Links</h2><p>Links are still clickable in PDFs, but for those users that might want to physically hold the content, we'll need to come up with something more creative. It was Ben Frain that originally enlightened me of this really simple, <u><a href="https://benfrain.com/create-print-styles-using-css3-media-queries/">super-cool trick</a></u>.</p><pre><code>@media print { a:after { content: "("attr(href)")";
推荐文章
