【黑师代码】长安与我(学习黑师20250405《男孩世界》音画居中/自适应设备效果)

花飞飞

花飞飞

@马黑黑 交一份新的作业哈，反正问题还存在。我是调不成功了。。

花飞飞

图片尺寸1700*1100

清茶煮雪

这个效果漂亮，飞飞好厉害呀

红影

这个好像右侧的字体设计被吃掉了一部分呢，是因为最新据中效果的缘故还是我现在用的笔记本屏幕太小了？
不过全屏的时候感觉位置是对的呢

红影

这个歌词同步飞飞用了11行歌词呢，这个位置足够，倒也适合这么多歌词。
背景制作漂亮，还暗含着书法文字，很雅致。视频的选用也漂亮

红影

哦，我把屏幕缩小显示，倒是正确的，看起来还个要缩小了看更好

马黑黑

花飞飞 发表于 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
这个效果漂亮，飞飞好厉害呀

谢谢菲儿支持哦送花

花飞飞

红影 发表于 2025-4-5 17:27
这个好像右侧的字体设计被吃掉了一部分呢，是因为最新据中效果的缘故还是我现在用的笔记本屏幕太小了？
不 ...

我用笔记本试着开了一下，的确是右侧被裁了一部分，不过现在有更改，影子再看看。。

花飞飞

红影 发表于 2025-4-5 17:30
这个歌词同步飞飞用了11行歌词呢，这个位置足够，倒也适合这么多歌词。
背景制作漂亮，还暗含着书法文字， ...

开始位置放在正中间的天空，用了15行，也好看，
后来感觉东一块西一块就调到跟标题一起了，少了几行。。

花飞飞

红影 发表于 2025-4-5 17:34
哦，我把屏幕缩小显示，倒是正确的，看起来还个要缩小了看更好

现在自适配缩小啦

花飞飞

马黑黑 发表于 2025-4-5 19:58
@小辣椒 也碰上类似问题。

当我们以 vw、wh 作为 clamp 首选项参数备用，那么，一切将依赖于访问者的 ...

好哒，做贴最好按显示器比例宽度设置，这个记下啦。。
我之前是看屏幕刚好装得下，就自己定了1700*900，这样上下左右都不需要滚动，刚好全显。
最近这几个贴子宽度不变略微偏高一些，1700*1100的，没想到刚好碰上关于尺寸的作业。。。

看了提示后我有各种试调，但中间VW和VH是一块调同样的数字，所以就各种不太成功。甚至电脑上显都不全。。后来就调了个相对显得比较多一点的发出来了

马黑黑

花飞飞 发表于 2025-4-5 20:18
好哒，做贴最好按显示器比例宽度设置，这个记下啦。。
我之前是看屏幕刚好装得下，就自己定了1700*900， ...

牺牲长边这是 cover 原则，为的是确保图片中的镁铝不被挤压的像个平躺的橄榄球

花飞飞

马黑黑 发表于 2025-4-5 20:22
牺牲长边这是 cover 原则，为的是确保图片中的镁铝不被挤压的像个平躺的橄榄球

显示成功就好。。刚平板试了一下。。
我接下来的贴子用之前的常规尺寸1700*900试看看。。

马黑黑

花飞飞 发表于 2025-4-5 20:26
显示成功就好。。刚平板试了一下。。
我接下来的贴子用之前的常规尺寸1700*900试看看。。

反正也可以调整首选值的比例，找到一个合适的以后记住就好

樵歌

已经非常完美了！

小辣椒

欣赏飞飞的新作业，这个教程小辣椒还没有看过的，先去看看黑黑的源码再过来

红影

花飞飞 发表于 2025-4-5 20:11
我用笔记本试着开了一下，的确是右侧被裁了一部分，不过现在有更改，影子再看看。。

现在显示完整了，但画面变小了。去看了一下代码，飞飞使用了75vm，所以变小了吧。
我对 clamp 也不是很熟，貌似自适应起作用是尺寸在最大和最小之间， 飞飞图图宽1700，是否取最大值1800，就能自适应了？

红影

花飞飞 发表于 2025-4-5 20:12
开始位置放在正中间的天空，用了15行，也好看，
后来感觉东一块西一块就调到跟标题一起了，少了几行。。

都好看，这个代码可以任意设置显示歌曲的行数，真方便啊