加载中...
不想等待可以点我关掉

前言

虽然说过暂时不写技术类的文章,不过嘛Stellar针对打印样式完全没有优化,无论纵向还是横向都是相当炸裂,只能再研究下了

不过话说回来,最近几次文章其实都是围绕编写笔记而写的,再加一篇吧

方法

使用@media print 媒体查询调整css样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
@media print {
/* 隐藏元素 */
.l_left,
.l_right,
.top.bread-nav.footnote,
div#read-next,
div#post-ai,
div#related-posts,
div#comments,
section#license,
section#share,
footer {
display: none;
}
.md-text psw {
color: unset;
background: unset;
border: 3px dashed #ccc;
}
/* 隐藏锚点 */
.markdownIt-Anchor {
display: none; /* 隐藏原始链接内容 */
}
/* 修改背景和边框 */
.article.banner {
background: none;
border-bottom: 1px dashed #ccc;
}

/* 调整边框圆角和内边距 */
.banner,
.banner.top {
border-radius: 0;
}

.banner .bottom {
padding: 0rem;
}

/* 取消grid布局 */
#start {
display: unset;
}
/* 调整字的上下边距 */
p {
margin: 0 !important;
}
/* 调整标题的上外边距 */
h1,h2,h3,h4,h5, h6 {
margin: 0 !important;
}

/* 限制图片高度 */
img {
max-height: 100vh;
}
}

成果

同时使用了故事类文章类型
同时使用了故事类文章类型

对于某些影响打印后阅读的标签没有更多更改,毕竟我写笔记只需要从源头遏制住,不使用这些标签就行了( ̄︶ ̄)↗