css @media print控制打印样式

print

用于打印机样式修改

伪类修改样式

:left、:right、:first。

:left 和 :right

通过 :left 和 :right 设置左右页面不同样式，并不代表用户代理会将页面双面打印

/* 通过分别设置左页和右页不同的左右页面距，为装订边留出更多的空间 */
@page :left {margin-left: 2.5cm;margin-right: 2.7cm;
}@page :right {margin-left: 2.7cm;margin-right: 2.5cm;
}

:first

用于匹配到文档的第一页

/* 首页上页边距设置为 10cm */
@page :first {margin-top: 10cm;
}

分页

page-break-before

page-break-before用于设置元素前面的分页行为

div {page-break-before: avoid;
}

完整样式

@media print {@page {/* 纵向打印 */// size: portrait;/* 横向打印 */size: landscape;/* 去掉页眉页脚*/margin-top: 0;margin-bottom: 0;}/* 告诉浏览器在渲染它时不要对框进行颜色或样式调整 */* {-webkit-print-color-adjust: exact !important;-moz-print-color-adjust: exact !important;-ms-print-color-adjust: exact !important;print-color-adjust: exact !important;}/*打印不显示打印按钮*/.print-button-container {display: none !important;}/* 伪类 :first 用于匹配到文档的第一页, 首页上页边距设置为 10cm */@page :first {margin-top: 10cm; }/* 通过分别设置左页和右页不同的左右页面距，为装订边留出更多的空间 *//**/@page :left {margin-left: 2.5cm;margin-right: 2.7cm;}@page :right {margin-left: 2.7cm;margin-right: 2.5cm;}}

css @media print控制打印样式相关推荐

php怎么自定义设置打印区域,JavaScript_jQuery实现区域打印功能代码详解，使用CSS控制打印样式，需要设 - phpStudy...
jQuery实现区域打印功能代码详解使用CSS控制打印样式,需要设置样式media="print",并且将页面中不需要打印的元素的样式display属性设置为none.如DEMO ...
jquery 利用CSS 控制打印样式
一.添加打印样式 1. 为屏幕显示和打印分别准备一个css文件,如下所示: 用于屏幕显示的css: <link rel="stylesheet" href=" ...
css打印适应纸张_CSS print 样式 css控制打印样式分页页面大小
显示器(screen)和打印机(printer)是两种差别很大的设备,所以从浏览器里看到的页面,打印出来也许和你看到的样子有很大的差距.screen一般使用逻辑单位比如px,而打印机则应该使用物理单位 ...
PrintArea打印，@media screen解决移动web开发的多分辨率问题，@media print设置打印的样式...
PrintArea打印,局部DIV打印插件,依赖JQuery. github:https://github.com/RitsC/PrintArea 当打印时需要临时改变页面布局,可以使用 @media ...
css打印适应纸张_css控制打印样式
显示器(screen)和打印机(printer)是两种差别很大的设备,所以从浏览器里看到的页面,打印出来也许和你看到的样子有很大的差距.screen一般使用逻辑单位比如px,而打印机则应该使用物理单位 ...
html设置打印规则,css @page规则控制打印设置选项
关于css控制打印更多内容可以参阅css控制打印内容的样式一章节. 使用@page规则可以对打印进行更多的设置,比如指定页面的尺寸.页边距,页眉页脚等,以求达到更好的效果. 下面做一下简单介绍. 一 ...
浏览器打印之 window.print() 设置打印样式和内容
项目中用的是谷歌浏览器,js 执行 window.print() 就会调用谷歌浏览器的打印功能. 打印其实打印的是整个当前网页,只是用媒体查询(@media print)把网页中要打印的内容做了显示, ...
h5打印时如何控制打印区域（基于jquery.PrintArea.js实现）
h5打印时如何控制打印区域(基于jquery.PrintArea.js实现) javaSript 的 window.print() 打印时打印范围不可控制,而jquery.PrintArea.js可以 ...
CSS控制print打印样式
一.添加打印样式 1. 为屏幕显示和打印分别准备一个css文件,如下所示: 用于屏幕显示的css: <link rel="stylesheet" href="c ...

css @media print控制打印样式

print

伪类修改样式

:left 和 :right

:first

分页

page-break-before

完整样式

css @media print控制打印样式相关推荐

最新文章

热门文章