利用 CSS 的 @media print 控制网页打印的版面样式与打印尺寸和隐藏链接

cnBeta • 2023年9月27日 13:49 • 游戏评测

一般我们在设定CSS时，都以浏览器为主，比较少针对打印时的版面来作控制，直到最近梅干一个朋友，问到梅干要怎么让输入出时，把版面控制在一页中，说真的梅干虽然知道可透过@media print来作控制，但却没实际的运用过，因此梅干就趁着这次，顺便练习一下@media print，来设定网页打印时版面样式。

Step1
而梅干就用申时七茶来跟大家分享一下，当按下打印时，梅干才发现，版面不但乱七八糟，且还有的图片还无法显示。
梅问题-利用CSS的@media print控制网页打印时的版面样式

Step2
首先，先针对区块选取，再按下加号。
梅问题-利用CSS的@media print控制网页打印时的版面样式

Step3
将显示设为隐藏后，再点右上的inspector-stylesesheet。
梅问题-利用CSS的@media print控制网页打印时的版面样式

Step4
由于我们希望的在打印时，上面的区块才隐藏，因此在进入编辑模式后，将刚刚隐藏的元素，透过@media print{….}包起来，而这就跟平常在写RWD的media screen一样，只不过这是针对打印时，才作动作当包好后，再执行一次打印，这时上方的轮播就不见了。
梅问题-利用CSS的@media print控制网页打印时的版面样式

Step5
当出现链接位置时，可透过a[href]：after {content： none ; }将它隐藏起来。
梅问题-利用CSS的@media print控制网页打印时的版面样式

Step6
最后一切都设定好后，可透过@page {size： A4; margin: 10px; }，设定页面的打印的尺寸与边界大小，因此这对于一般电商网站来说，还挺实用的，因此也赶快检查一下，你的网页在打印时，版面是否正常吧！
梅问题-利用CSS的@media print控制网页打印时的版面样式