【黑师代码】长安与我(学习黑师20250405《男孩世界》音画居中/自适应设备效果)
本帖最后由 花飞飞 于 2025-4-5 19:28 编辑 <br /><br /><style>@import 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.css';
#tz { position: absolute; left: 50%; transform: translate(-50%, 10px); width: clamp(800px, 75vw, 1700px); height: clamp(460px, 90vh, 1100px); background: #ddd url('https://642303.freep.cn/642303/tu/20250404cayw.webp') no-repeat center/100% 100%; }
#mplayer {--track: #bad8b4;--prog: #27541f;bottom: 30px; }
#lrcDiv { writing-mode: vertical-rl; right: 10%; top:30%;color: #dfeede; --hlcolor: #f98354; opacity: .55;}
#lrcDiv > p.hlight {font-size: 20px;}
#fsbtn { bottom: 30px; left: 30px; }
.zw { height: clamp(900px, 90vh, 1500px); margin: 130px; }
.vid {mix-blend-mode: screen; opacity: .25;-webkit-mask: linear-gradient(to bottom,transparent,red);transform: rotateX(180deg);bottom:-330px;}
</style>
<div id="tz" class="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2661599961" autoplay loop></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_preview/21/08/30/15/04/49/video612c8311bd810.mp4" autoplay loop muted></video>
</div>
<div class="zw"></div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.js';
var gc= `
单曲：见须臾（女版）
歌手：此间不语 / 苇苇
所属专辑：见须臾
作词 : 白蔓
作曲 : 白蔓
和声编写：汝袖
混音：绯戈
封面：解殃生
制作人：思栩
出品：此间不语
学习黑师0405《男孩世界》
音画居中/自适应设备效果
若群山天风云海也记得
曾于此眺望的你我
从故纸漫说至头顶星河
风月却不可说
后来星移物换江湖干涸
音书无去各自寄泊
却偏爱说年少时故人某
恍惚今夕年何
你该是我长生中
注定陷落的劫祸
殃及此生
见天地见辽阔
便从此不肯同尘
做昏蒙一过客
只肯随白马
梦里追鹤
如今红尘中
走马观花过
来处杳渺不见车辙
所历千种虚华
万场烟火
到君前都失色
你该是我长生中
注定陷落的劫祸
殃及此生
见天地 见辽阔
便从此不肯同尘
做昏蒙一过客
只肯随白马 梦里追鹤
神佛如何渡痴人
自甘妄心执着
画囚牢 为求故剑错刻舟
到太行雪染白首
将平生说从头
能有几行字关于你我
纷纷崖上雪 无声崩落
`;
hcplay(tz,gc,11);
</script>
@马黑黑 交一份新的作业哈，反正问题还存在。{:4_173:}我是调不成功了。。 图片尺寸1700*1100 这个效果漂亮，飞飞好厉害呀{:4_204:} 这个好像右侧的字体设计被吃掉了一部分呢，是因为最新据中效果的缘故还是我现在用的笔记本屏幕太小了？
不过全屏的时候感觉位置是对的呢{:4_187:} 这个歌词同步飞飞用了11行歌词呢，这个位置足够，倒也适合这么多歌词。
背景制作漂亮，还暗含着书法文字，很雅致。视频的选用也漂亮{:4_199:} 哦，我把屏幕缩小显示，倒是正确的，看起来还个要缩小了看更好{:4_187:} 花飞飞 发表于 2025-4-5 16:01
@马黑黑 交一份新的作业哈，反正问题还存在。我是调不成功了。。
@小辣椒 也碰上类似问题。
当我们以 vw、wh 作为 clamp 首选项参数备用，那么，一切将依赖于访问者的显示设备分别率（浏览器最大化时）或浏览器视口（浏览器可以最大化、还原、最小化，其中还原模式可以拖曳改变宽高）。vw是视口宽度 1%、vh是视口高度1%，我们也可以使用百分比（例如60%）来替代它们，而这一切，都不是我们可预知的，所以使用 clamp 函数来判断，这意味着我们所设置的 clamp 函数的参数很重要，它应与原始图片的比例相配套。
元素的 background 有一个属性，background-size，即背景图片渲染的尺寸，在简写 background 属性中，center / cover 表述语里，center 是 background-position，背景图位置、居中，center 等于 50% 50%；cover 是封面之一，以书本、杂志的封面形式显示图片的尺寸，不压缩图片，但会以最短边以基准，长边长出的比例部分会被裁剪，以确保图片的呈现不扭曲。背景尺寸也可以用 100% 100% 表示，意思是宽高都是图片的100%，但这个可能带来的后果是图片扭曲，除非图片的宽高尺寸恰好和帖子的宽高呈现比例一致。
通俗点讲就是，我们设计的图片，最好和我们预期的帖子的宽高相一致。所以，这里面有个配套：帖子的宽高预设和图片的实际尺寸相配套或接近，反过来说，设计图片的时候，最好不要随心所欲地设计宽高，应与帖子的预期宽高尽可能配套。
举例来说，如果想做横版的帖子，那么，符合常规显示器分辨率比例的宽高设计会是最相对合适宽幅帖子的。
不过话说回来，这一切要完全贴合也不容易，所以追求的终极目标是，尽量。 菲儿 发表于 2025-4-5 16:50
这个效果漂亮，飞飞好厉害呀
谢谢菲儿支持哦{:4_187:}送花 红影 发表于 2025-4-5 17:27
这个好像右侧的字体设计被吃掉了一部分呢，是因为最新据中效果的缘故还是我现在用的笔记本屏幕太小了？
不 ...
我用笔记本试着开了一下，的确是右侧被裁了一部分，不过现在有更改，影子再看看。。{:4_187:} 红影 发表于 2025-4-5 17:30
这个歌词同步飞飞用了11行歌词呢，这个位置足够，倒也适合这么多歌词。
背景制作漂亮，还暗含着书法文字， ...
开始位置放在正中间的天空，用了15行，也好看，
后来感觉东一块西一块就调到跟标题一起了，少了几行。。 红影 发表于 2025-4-5 17:34
哦，我把屏幕缩小显示，倒是正确的，看起来还个要缩小了看更好
现在自适配缩小啦{:4_173:} 马黑黑 发表于 2025-4-5 19:58
@小辣椒 也碰上类似问题。
当我们以 vw、wh 作为 clamp 首选项参数备用，那么，一切将依赖于访问者的 ...
好哒，做贴最好按显示器比例宽度设置，这个记下啦。。
我之前是看屏幕刚好装得下，就自己定了1700*900，这样上下左右都不需要滚动，刚好全显。
最近这几个贴子宽度不变略微偏高一些，1{:4_173:}700*1100的，没想到刚好碰上关于尺寸的作业。。。
看了提示后我有各种试调，但中间VW和VH是一块调同样的数字，所以就各种不太成功。甚至电脑上显都不全。。后来就调了个相对显得比较多一点的发出来了
花飞飞 发表于 2025-4-5 20:18
好哒，做贴最好按显示器比例宽度设置，这个记下啦。。
我之前是看屏幕刚好装得下，就自己定了1700*900， ...
牺牲长边这是 cover 原则，为的是确保图片中的镁铝不被挤压的像个平躺的橄榄球 马黑黑 发表于 2025-4-5 20:22
牺牲长边这是 cover 原则，为的是确保图片中的镁铝不被挤压的像个平躺的橄榄球
{:4_173:}显示成功就好。。刚平板试了一下。。
我接下来的贴子用之前的常规尺寸1700*900试看看。。 花飞飞 发表于 2025-4-5 20:26
显示成功就好。。刚平板试了一下。。
我接下来的贴子用之前的常规尺寸1700*900试看看。。
反正也可以调整首选值的比例，找到一个合适的以后记住就好 已经非常完美了！ 欣赏飞飞的新作业，这个教程小辣椒还没有看过的，先去看看黑黑的源码再过来 花飞飞 发表于 2025-4-5 20:11
我用笔记本试着开了一下，的确是右侧被裁了一部分，不过现在有更改，影子再看看。。
现在显示完整了，但画面变小了。去看了一下代码，飞飞使用了75vm，所以变小了吧。
我对 clamp 也不是很熟，貌似自适应起作用是尺寸在最大和最小之间， 飞飞图图宽1700，是否取最大值1800，就能自适应了？ 花飞飞 发表于 2025-4-5 20:12
开始位置放在正中间的天空，用了15行，也好看，
后来感觉东一块西一块就调到跟标题一起了，少了几行。。
都好看，这个代码可以任意设置显示歌曲的行数，真方便啊{:4_187:}