不受教
<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 = `
不受教
——燕云十六声·清河明线同人曲
“世道要教我，我天生不受教”
策划：赖柳
监制/作词：人间逢我
监制/作曲：江笑晴
编曲/和声编唱：Oliver宣霖
演唱：刷牙
后期：梨酣
视频剪辑：久渝远州
题字/歌词手写：他见河川
出品：弧光工作室
恩是残竹摇曳
怨是好梦将歇
入世深与识事尚浅
红尘安得两全
吹灭花灯见寒夜
淌过秋水望长天
也跑马照过面 也纵酒并过肩
浮云笑尽少年
往来不归雁 寻蝶过山巅
只羡推门去 一步便天外天
侠义两三千 不及怜取眼前
只问肩上雪 可见惯这人间
湖中月 酒中仙 情是无名手中剑
枝上茧 檐上燕 恨是埋骨墟里烟
江湖是 醒不知醉 醉不觉眠
意气是过盈则缺
偏不与宿命周旋
快意何惧山高路险
月下一壶霜雪 换过客一句约
生死负尽少年
穿心断红线 离人少团圆
晚来南风急 吹野火灼孤烟
仁义三分苦 剑刃腥刀口甜
只问衣上血 可杀尽这仇怨
笑与泪 痴与念 见世间恰似此间
悲与欢 聚与别 风尘飘尽天地远
岁月是 年少走马 故人擦肩
转身共叙说书一页
笑与泪 痴与念 见世间长似此间
悲与欢 聚与别 风尘飞尽天地远
岁月是 年少走马 故人擦肩
飒沓行去江湖试剑
`;
hcplay(papa, geci);
</script>
<div id="hEdiv"><pre id="hEpre">
<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 = `
不受教
——燕云十六声·清河明线同人曲
“世道要教我，我天生不受教”
策划：赖柳
监制/作词：人间逢我
监制/作曲：江笑晴
编曲/和声编唱：Oliver宣霖
演唱：刷牙
后期：梨酣
视频剪辑：久渝远州
题字/歌词手写：他见河川
出品：弧光工作室
恩是残竹摇曳
怨是好梦将歇
入世深与识事尚浅
红尘安得两全
吹灭花灯见寒夜
淌过秋水望长天
也跑马照过面 也纵酒并过肩
浮云笑尽少年
往来不归雁 寻蝶过山巅
只羡推门去 一步便天外天
侠义两三千 不及怜取眼前
只问肩上雪 可见惯这人间
湖中月 酒中仙 情是无名手中剑
枝上茧 檐上燕 恨是埋骨墟里烟
江湖是 醒不知醉 醉不觉眠
意气是过盈则缺
偏不与宿命周旋
快意何惧山高路险
月下一壶霜雪 换过客一句约
生死负尽少年
穿心断红线 离人少团圆
晚来南风急 吹野火灼孤烟
仁义三分苦 剑刃腥刀口甜
只问衣上血 可杀尽这仇怨
笑与泪 痴与念 见世间恰似此间
悲与欢 聚与别 风尘飘尽天地远
岁月是 年少走马 故人擦肩
转身共叙说书一页
笑与泪 痴与念 见世间长似此间
悲与欢 聚与别 风尘飞尽天地远
岁月是 年少走马 故人擦肩
飒沓行去江湖试剑
`;
hcplay(papa, geci);
</script>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/helight/helight1.js';
hlight.hl(hEdiv, hEpre);
</script>
本帖再次探索自适应各类显示终端的做法。本次：
CSS中使用了过去介绍过的 aspect-ratio 属性，用来维持帖子 16:9 的宽高比，不过需要注意的是，根据官方文档的说明，aspect-ratio 属性需要建立在对象已经存在尺寸的前提下才能生效，故而帖子中设置了 height 属性为 auto 或任意相对合理的数值，然后 aspect-ratio 属性会强制 16:9 的宽高比。代码在第 3 行。
使用媒体查询 @media 微调特小尺寸的显示设备不是必须的，这里是接受了ds的建议采用的代码。它的作用还是有的，不过意义不大：使用特小设备者一般也不会用它来访问音画帖，即使访问了，前面的设置也差不多可以达成较好的观感。
帖子在移动端端渲染效果还是可以的，横竖看都会自动调整帖子的自适应呈现功能。不足是，一为全屏状态下，竖看时视频logo暴露无遗；二为竖排的文本因为本歌曲的歌词一些歌句较长，会显示不完。
另外，竖排文本一般会存在一个问题，上下汉字粘连在一起，没有呼吸的空间，为解决此问题，lrcDiv 加入 letter-spacing 属性，用来辅助拉开字间距。代码在第 8 行，设置了 0.2em 的字间距，可以适当调整。 补充说明帖子水平居中的设置：
为避免 position: absolute 绝对定位带来的弊端，比如忘记了辅助占位div，本帖使用 position: relative 相对定位帖子容器，并设置 left 值 和 transform: translateX 值，其中left 属性值为 calc(50% - 81px) ，81px 是本论坛的帖子的爸爸容器的布局偏移视口中心参数，discuz! 论坛使用宽屏显示的是 91px，记住 81px、91px 就行了，不怕心算能力不好。 看了下说明，迫不及待的试了一下我的1700的大图，手机完美按比例缩小显示。。。
白老师厉害，太爱你了，哈哈。。。
再也不用因自适应去算得脑壳疼了。
{:4_173:} 花飞飞 发表于 2025-4-19 09:40
看了下说明，迫不及待的试了一下我的1700的大图，手机完美按比例缩小显示。。。
白老师厉害，太爱你了，哈 ...
感觉呢，播放器、歌词如果也能配套，那就叫完美有点瑕疵了——这是最理想的状态了吧。但是这个工作量还是挺大的，所以，我个人觉得还是 scale 方式来的最为省事：帖子容器伸缩了，其余子元素跟着伸缩。 width: clamp(600px, 90vw, 1600px); height: auto; aspect-ratio: 16/9;
这个尺寸很接近于我平时发的贴子尺寸。。
只用把1600改成1700就是我平时发贴的模板。。超赞。。。{:4_173:}
height: auto;原来高度还可以这样设置，自动调节好强悍。。 马黑黑 发表于 2025-4-19 09:01
本帖再次探索自适应各类显示终端的做法。本次：
CSS中使用了过去介绍过的 aspect-ratio 属性，用来维持 ...
我的手机算是特小设备了吧，哈哈。。看了显示也是相当完美。。观感相当不错。。
横看效果之前 就是完美，现在是横看竖看都完美。。。 至于你说的竖排文字粘连的问题，
我这里是要粘就两个字叠起来了，这个之前跟你汇报过。
别的粘没有。。再用用感觉一下。。{:4_173:} 马黑黑 发表于 2025-4-19 09:07
补充说明帖子水平居中的设置：
为避免 position: absolute 绝对定位带来的弊端，比如忘记了辅助占位div ...
这两个数值常做贴的早记在心里了。。{:5_112:}这个还好。。 马黑黑 发表于 2025-4-19 09:43
感觉呢，播放器、歌词如果也能配套，那就叫完美有点瑕疵了——这是最理想的状态了吧。但是这个工作量还是 ...
我的试贴用手机看，怎么看怎么完美。。
这个设置一气呵成，更简洁。。。那个.ZW的都不用了。。{:4_199:} 花飞飞 发表于 2025-4-19 09:56
我的手机算是特小设备了吧，哈哈。。看了显示也是相当完美。。观感相当不错。。
横看效果之前 就是完美 ...
横竖看也得看浏览器，一些老旧版本的浏览器不支持横竖自由切换 这些细节的调整，让这个3合一更加完美了，还可以用高度自动和 16:9 的宽高比来自动调整呢，这个帖子真的太赞了{:4_199:} 花飞飞 发表于 2025-4-19 10:03
我的试贴用手机看，怎么看怎么完美。。
这个设置一气呵成，更简洁。。。那个.ZW的都不用了。。
如果使用绝对定位，不用考虑81px、91px，缺点是得有高个子帮它顶天，不然天会坍塌下来 自适应的设置，充分调动了电脑功能，减少自己计算的内容了，黑黑太赞了{:4_199:} 红影 发表于 2025-4-19 10:31
这些细节的调整，让这个3合一更加完美了，还可以用高度自动和 16:9 的宽高比来自动调整呢，这个帖子真的太 ...
蟹蟹谢赞 自适应的设置，还能适应各种显示设备，实在是太完美了{:4_199:} 花飞飞 发表于 2025-4-19 10:01
这两个数值常做贴的早记在心里了。。这个还好。。
{:4_190:} 花飞飞 发表于 2025-4-19 09:59
至于你说的竖排文字粘连的问题，
我这里是要粘就两个字叠起来了，这个之前跟你汇报过。
别的粘没有。。再 ...
这个大约是系统、浏览器的支持度问题了吧，正常的都正常的，不正常的可能会不正常 这画面制作和这首歌也特别好。
歌曲特别桀骜不驯：“世道要教我，我天生不受教”，太霸气 了{:4_173:}