伪手写HTML排版公众号文章的几点笔记

继使用 Markdown + MarkHere 之后,最近又转向用「在线编辑器+手动微调 HTML」方式,进行公众号文章的排版,整理了这篇笔记。

图片作为背景

在HTML里面使用一张图片,从语义角度讲,应当是使用img标签。但是,有些图片,它并非内容,无需传达信息,可以将它放入到CSS当中的 background属性里。这样有两个好处:第一,必须图片加载完毕,整个内容才会显示出来(相应的,作为背景使用的图片,不能太大,不然加载太慢);第二,不会在浏览时误触,即无法点击放大。

举例

哆啦A梦
图片一:可点击
图片二:不可点击

对应HTML

图片一

<img src="https://mmbiz.qpic.cn/mmbiz_png/29ic8DSckSnBBVSuHzuy1GibwHBp0jU88zbuQDGzjr6NkMTma4MgWAFExLe8p4ms1kdpTdiaVZ11tOkMdXbWrwEmQ/0?wx_fmt=webp" alt="哆啦A梦">

图片二

<p style="background-image: url(https://mmbiz.qpic.cn/mmbiz_png/29ic8DSckSnBBVSuHzuy1GibwHBp0jU88zbuQDGzjr6NkMTma4MgWAFExLe8p4ms1kdpTdiaVZ11tOkMdXbWrwEmQ/0?wx_fmt=webp);"></p>

文字不可被选中

与图片不可被选中类似的,文字也可以设置为不可被选中状态。目前,我使用这个的场景在于:提供需要复制的内容,比如分享的网址,或者相关内容。

而实现以上需求的办法,便是在对应内容的CSS当中,添加以下属性:

-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
/* pointer-events: none; */ /* 微信浏览器还需附加该属性才有效 */
user-select:none;

举例

这是一段可以选中的文字

这是一段不可以被选中的文字

这段最后的链接是可以被选中、复制的:https://imouyang.com

对应HTML

<p style="margin: 0 0 15px; padding: 0; line-height: 1.5;">这是一段可以选中的文字</p>
<p style="margin: 0 0 15px; padding: 0; line-height: 1.5;-webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;">这是一段不可以被选中的文字</p>
<p style="margin: 0 0 15px; padding: 0; line-height: 1.5;-webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;">这段最后的链接是可以被选中、复制的:<span style="-webkit-touch-callout:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;">https://imouyang.com</span></p>

深色模式的兼容

微信在7.0.12版本上线了「深色模式」,这会导致一系列需要适配的问题。目前来说,我遇到了以下几个问题:1. 图片背景不能再无脑使用白底,因为在深色模式下,背景会自动转变为暗色,图片中的白色背景就「正常」显示出来了;2. 不能放置连续图片进行拼接为长图,否则,图片与图片之间会出现明显的白色条纹。

解决方案

  1. 白底图片尽量修改为透明背景
  2. 长图进行压缩,不要直接多图拼接

 本篇
伪手写HTML排版公众号文章的几点笔记 伪手写HTML排版公众号文章的几点笔记
继使用 Markdown + MarkHere 之后,最近又转向用「在线编辑器+手动微调 HTML」方式,进行公众号文章的排版,整理了这篇笔记。 图片作为背景在HTML里面使用一张图片,从语义角度讲,应当是使用img标签。但是,有些图片,它
2021-02-28
下一篇 
碎碎念之你好李焕英 碎碎念之你好李焕英
说在前面的话一定要放低要求,这只是商业电影。至于我们期待(购买)的,不管是包袱,还是情怀,是特效,还是剧情,都是殊途同归。毕竟它是春节票房的重要成员,能拿下这样档期的位置,都有值得肯定的东西。 几句碎碎念说着东北话的湖北人不论是媒体宣传还是
2021-02-19
  目录