定义横向和纵向不同的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 条评论
登录 后参与评论

相关文章

来自专栏与神兽党一起成长

使用echarts问题1

如果如果你是这样使用echarts的,那请注意了。 刚开始我用页面的DOM去做echarts.init(dom);

1824
来自专栏从零开始学自动化测试

python测试开发django-7.模板继承

打开一个网站时候,点导航栏切换到不同的页面,发现导航部分是不变的,只是页面的主体内容变了,于是就可以写个母模板,其它的子页面继承母模板就可以了。

893
来自专栏Java帮帮-微信公众号-技术文章全总结

01.HTML教程/简介/基础

01.HTML教程/简介/基础 HTML 教程- (HTML5 标准) 超文本标记语言(英语:HyperText Markup Language,简称:HTML...

5548
来自专栏编程

前端学习笔记03 js基础

js基础( js嵌入方式、输出语句) 1 s现在的作用 1、验证表单(以前的网速慢) 2、页面特效 (PC端的网页效果) 3、移动端 (移动 web 和app)...

2046
来自专栏Golang语言社区

Golang 解析base64网络传输如何解析

今天在给服务器做压力测试的流程的时候,遇到了个Golang语言的解析问题;涉及到的主要是解析Base64编码问题,同时也看了底层的源码以下是自己实现的解析: ...

4076
来自专栏跟着阿笨一起玩NET

WinForm自定义验证控件

本文转载:http://blog.csdn.net/ziyouli/article/details/7583824

1851
来自专栏玄魂工作室

textarea的中文输入判断与搜狗输入法的特殊行为

虽然要讲解的知识点是通用的,但是还是要介绍下我的应用场景和测试环境。 0.1 应用场景和测试环境 我的应用是一块使用Html Canvas开发的黑板,在黑板上实...

40411
来自专栏疯狂的小程序

微信小程序组件化编程和实践(上)

从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程。查看自己使用的小程序基础库版本,可以通过在开发者工具右侧点击详情查看:

7937
来自专栏谈补锅

免费真机调试 -- Xcode7

  刚新安装了Xcode7 Version 7.1 beta , 据说这个版本可以免费真机调试,于是用了一个新的AppID测试了,发现真的可以免费真机调试了呢!...

7853
来自专栏前端人人

React第三方组件4(状态管理之Reflux的使用④TodoList下)

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件4(状态管理之Reflux的使用①...

3458

扫码关注云+社区

领取腾讯云代金券