不受教

马黑黑 · 发表于 2025-4-19 08:46

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2025-4-19 08:47

<style>
	@import 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.css';
	#papa { left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1600px); height: auto; aspect-ratio: 16/9; background: #eee url('https://638183.freep.cn/638183/t24/webp3/buuzjn.webp') no-repeat center/cover; }
	@media (max-width: 500px) {
		#papa { width: clamp(250px, 90vw, 300px); font-size: 0.8em; }
	}
	#mplayer { bottom: 20px; }
	#lrcDiv { writing-mode: vertical-rl; top: 30px; left: 30px; text-align: left; letter-spacing: 0.2em; }
	#fsbtn { top: 30px; }
</style>

<div id="papa" class="pa">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2679363579" autoplay loop></audio>
	<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/11/07/14/54/30/video672c64260235f.mp4" autoplay loop muted></video>
</div>

<script type="module">
	import { hcplay } from 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.js';
	var geci = `
[00:01.651]不受教
[00:02.856]——燕云十六声·清河明线同人曲
[00:04.169]“世道要教我，我天生不受教”
[00:06.337]策划：赖柳
[00:07.137]监制/作词：人间逢我
[00:07.993]监制/作曲：江笑晴
[00:08.793]编曲/和声编唱：Oliver宣霖
[00:09.697]演唱：刷牙
[00:10.585]后期：梨酣
[00:11.529]视频剪辑：久渝远州
[00:12.465]题字/歌词手写：他见河川
[00:13.520]出品：弧光工作室
[00:20.408]恩是残竹摇曳
[00:26.361]怨是好梦将歇
[00:30.705]入世深与识事尚浅
[00:35.304]红尘安得两全
[00:40.890]吹灭花灯见寒夜
[00:45.962]淌过秋水望长天
[00:50.104]也跑马照过面 也纵酒并过肩
[00:55.737]浮云笑尽少年
[01:00.250]往来不归雁 寻蝶过山巅
[01:04.681]只羡推门去 一步便天外天
[01:09.624]侠义两三千 不及怜取眼前
[01:14.784]只问肩上雪 可见惯这人间
[01:19.528]湖中月 酒中仙 情是无名手中剑
[01:24.458]枝上茧 檐上燕 恨是埋骨墟里烟
[01:29.377]江湖是 醒不知醉 醉不觉眠
[01:34.657]意气是过盈则缺
[01:59.189]偏不与宿命周旋
[02:05.132]快意何惧山高路险
[02:09.205]月下一壶霜雪 换过客一句约
[02:14.837]生死负尽少年
[02:19.148]穿心断红线 离人少团圆
[02:23.684]晚来南风急 吹野火灼孤烟
[02:28.949]仁义三分苦 剑刃腥刀口甜
[02:33.901]只问衣上血 可杀尽这仇怨
[02:38.708]笑与泪 痴与念 见世间恰似此间
[02:43.741]悲与欢 聚与别 风尘飘尽天地远
[02:48.877]岁月是 年少走马 故人擦肩
[02:53.965]转身共叙说书一页
[02:58.788]笑与泪 痴与念 见世间长似此间
[03:03.636]悲与欢 聚与别 风尘飞尽天地远
[03:08.475]岁月是 年少走马 故人擦肩
[03:13.645]飒沓行去江湖试剑
`;
	hcplay(papa, geci);
</script>

马黑黑 · 发表于 2025-4-19 09:01

本帖再次探索自适应各类显示终端的做法。本次：

CSS中使用了过去介绍过的 aspect-ratio 属性，用来维持帖子 16:9 的宽高比，不过需要注意的是，根据官方文档的说明，aspect-ratio 属性需要建立在对象已经存在尺寸的前提下才能生效，故而帖子中设置了 height 属性为 auto 或任意相对合理的数值，然后 aspect-ratio 属性会强制 16:9 的宽高比。代码在第 3 行。

使用媒体查询 @media 微调特小尺寸的显示设备不是必须的，这里是接受了ds的建议采用的代码。它的作用还是有的，不过意义不大：使用特小设备者一般也不会用它来访问音画帖，即使访问了，前面的设置也差不多可以达成较好的观感。

帖子在移动端端渲染效果还是可以的，横竖看都会自动调整帖子的自适应呈现功能。不足是，一为全屏状态下，竖看时视频logo暴露无遗；二为竖排的文本因为本歌曲的歌词一些歌句较长，会显示不完。

另外，竖排文本一般会存在一个问题，上下汉字粘连在一起，没有呼吸的空间，为解决此问题，lrcDiv 加入 letter-spacing 属性，用来辅助拉开字间距。代码在第 8 行，设置了 0.2em 的字间距，可以适当调整。

马黑黑 · 发表于 2025-4-19 09:07

补充说明帖子水平居中的设置：

为避免 position: absolute 绝对定位带来的弊端，比如忘记了辅助占位div，本帖使用 position: relative 相对定位帖子容器，并设置 left 值和 transform: translateX 值，其中left 属性值为 calc(50% - 81px) ，81px 是本论坛的帖子的爸爸容器的布局偏移视口中心参数，discuz! 论坛使用宽屏显示的是 91px，记住 81px、91px 就行了，不怕心算能力不好。