zoukankan      html  css  js  c++  java
  • Web打印设置

    一,A4纸尺寸

    1,A4纸尺寸:210mm*297mm

    2,A4纸的像素和分辨率

    根据A4纸尺寸是210毫米×297毫米,而1英寸=2.54厘米,我们可以得出当分辨率是多少像素时,得出A4纸大小尺寸为多少毫米。如下是我们较长用到的规格尺寸:
    • 当分辨率是72像素/英寸时,A4纸像素长宽分别是842×595;
    • 分辨率是96像素/英寸时,A4纸的尺寸的图像的像素是794×1123;(默认)
    • 当分辨率是120像素/英寸时,A4纸像素长宽分别是2105×1487;
    • 当分辨率是150像素/英寸时,A4纸像素长宽分别是1754×1240;
    • 当分辨率是300像素/英寸时,A4纸像素长宽分别是3508×2479;

    win7下屏幕DPI分辨率为96像素/英寸。所以A4纸像素尺寸一般为794*1123

    二,为打印机而不是屏幕设计的样式

    /*样式将只是应用于打印*/
    
    @media print{
    
    }

    注* 也可通单独的css文件,设置link的media = "print"属性来指定此样式专用于打印。

    <link type="text/css"  rel="stylesheet" href="css/print.css" media="print"/>

    为你的网站重塑整个css是没有必要的,整体而言,由打印继承默认样式,仅对不同的需要加以限定,为了节省打印时的碳粉,大多数浏览器会自动反转颜色,为了达到最佳效果,应使色彩变化明显:

    @media print{
    
          body{
                  color:#000;
        
                 background:#fff;
            }
    
    }        

    我们不是在创建整个网页的截图,只是为了展现一个设计良好,可读性强的网站:

    h1 {
       color: #fff;
       background: url(banner.jpg);
    }
    
    @media print {
       h1 {
          color: #000;
          background: none;
       }
    
       nav, aside {
          display: none;
       }
    }

    为了使打印机更具效率,应只显示主体内容,去除页眉页脚导航栏

    @media print {
       h1 {
          color: #000;
          background: none;
       }
    
       nav, aside {
          display: none;
       }
    
       body, article {
          width: 100%;
          margin: 0;
          padding: 0;
       }
    
       @page {
          margin: 2cm;
       }
    }

    链接的处理

    在打印机上链接是看不到的,应对超链接进行扩展

    /*在超链接后面添加带<http://XXX>的完整地址*/
    @media print {
       article a {
          font-weight: bolder;
          text-decoration: none;
       }
    
       article a[href^=http]:after {
          content:" <" attr(href) "> ";
       }
    }

    三, 控制打印设置选项

    该@page规则允许你指定页面的各个方面。例如,你将要指定页面的尺寸。页边距,页眉、页脚等都是非常重要的。

    @page规则--纸张大小设置

    通过下面这条CSS您可以设置纸张大小,5.5英寸宽,8.5英寸高.

    @page{
       size:5.5in 8.5in;
    }

    你还可以通过别名控制纸张大小,如A4或"legal".

    @page{
      size:A4;    
    }

    你还可以控制打印方向,protrait:纵向打印 ,landscape:横向

    @page {
      size: A4 landscape;
    }

     四,控制页面边距

     @page{
             size:A4 landscape;
             margin:10px;
         }

     http://www.cnblogs.com/dong0738/archive/2011/10/07/2200539.html

  • 相关阅读:
    在Python中定义和使用抽象类的方法
    多数公司容易犯的5个大数据错误
    多数公司容易犯的5个大数据错误
    变“后发优势”为“现实优势” 时空大数据时代将临
    变“后发优势”为“现实优势” 时空大数据时代将临
    了解大数据在人力资源和薪资中的作用
    了解大数据在人力资源和薪资中的作用
    python数据结构之二叉树的统计与转换实例
    python数据结构之二叉树的统计与转换实例
    kafka,activemq rabbitmq.rocketmq的优点和缺点
  • 原文地址:https://www.cnblogs.com/qianxunpu/p/9006552.html
Copyright © 2011-2022 走看看