专栏首页JackeyGao的博客定义横向和纵向不同的print样式

定义横向和纵向不同的print样式

定义横向和纵向不同的print样式

Posted November 25, 2018

最近优化了 中文诗歌 的打印样式, 由于 Chrome 在打印的时候可以选择横向或者纵向的布局, 所以想同时支持两种布局。

横向布局是这样的, 图文为左右结构, 开启 overflow ,如果有溢出到文章范围则不显示(比如长恨歌), 则全部打印一页:

#横向效果图

纵向布局则是这样, 图文为上下结构, 并且文章的overflow关闭:

#纵向效果图

怎么设置?

@media print 可以设置打印样式, 配合特定的条件, 我们可以针对不同的布局做样式处理。 布局的特定的条件就是orientation控制项.

即:

横向

CSS

@media print and (orientation:landscape) {
    #main .grid .column {
        width: 50%;
    }
    /* ... */
    /* 为了举例简单, 我省略了下面部分代码. */
}

纵向

CSS

@media print and (orientation:portrait) {
    #main .grid .column {
        width: 100%;
    }
    /* ... */
    /* 为了举例简单, 我省略了下面部分代码. */
}

当然你也可以通过定义不同的stylesheets文件, 然后通过 link 的media参数各自声明引用. 此例中假设我已经定义了portrait.css和landscape.css样式表文件.

HTML

<link rel="stylesheet" media="print and (orientation:portrait)" href="portrait.css">

<link rel="stylesheet" media="print and (orientation:landscape)" href="landscape.css">

如果配置没有问题的话, 通过Chrome的打印功能可以看到以下结果图:

#横向打印效果图

#纵向打印效果图

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Conoha主机测评

    最近由于心知肚明原因, 原来的linode主机已不能使用。所以最近又开始了疯狂找主机的历程, 说起这个简直不能提起。 我本人也连续找了好多家, linode更换...

    用户1416054
  • Django小技巧13: 使用F()表达式

    在 Django QuerySets API 中, F() 用于直接在数据库中引用模型的值。假设你有一个带有price的 Product 模型, 你希望为所有的...

    用户1416054
  • Python 高级并发3

    本篇主要讲案例, 两个使用Concurrent.futures实现的并发, 一个是多线程, 一个是多进程。

    用户1416054
  • 为什么都说java比较容易入门?

    说java比较容易入门的人,应该都是正常的人,因为相比之下,java有着不可比拟的优势,对于编程新手来说这个优势,可以让他们更快的用java语言写出他们自己的东...

    程序员互动联盟
  • PyTorch 60-Minute Blitz

    Tensors(张量)与 Numpy 的 ndarrays 类似,但是其支持在 GPU 上使用来加速计算。

    口仆
  • Silverlight 4 RIA Service dataform Template, 代码选择控件,Validate验证使用技巧

    Silverlight 4 RIA Service dataform Template, 代码选择控件,Validate验证使用技巧 功能 定义只读,新增,...

    阿新
  • LabVIEW,NI-DAQmx,LabWindows各个版本下载

    最近实验室要用LabVIEW采集数据,找了一下下载地址,官网需要注册,很不爽。后经查找,发现有个专门用来下载的不需要注册的http://download.ni....

    望天
  • Java面经:有赞offer之路 - 5轮面试的考验

    一面 (电面 45min)   Hashmap 是线程安全的吗?Hashtable为什么是线程安全的?      ConcurrentHashmap怎么保证...

    牛客网
  • 【自然框架】重新整理后的自然框架源码!

      整理后的自然框架源码,有九个项目,可以看下面的脑图,带“对号”的表示是一个独立的项目。后面的是主要内容。 欢迎下载http://www.naturefw....

    用户1174620
  • 高性能服务器架构思路(四)——编码复杂度和通信

    以前我们的代码,从上往下执行,每一行都会占用一定的 CPU 时间,这些代码的执行顺序,也是和编写的顺序基本一致,任何一行代码,都是唯一时刻的执行任务。当我们在编...

扫码关注云+社区

领取腾讯云代金券