论坛 › 马黑黑教程专版 › 远野（测试clamp设置16比9分辨率）

马黑黑 发表于 2025-8-28 12:20

远野（测试clamp设置16比9分辨率）

<style>
        #pa {
                margin: 20px 0;
                position: relative;
                display: grid;
                place-items: center;
                left: calc(50% - var(--offsetX));
                transform: translateX(-50%);
                width: clamp(800px, 100vw, 1440px);
                height: clamp(450px, 56.25vw, 810px);
                box-sizing: border-box;
                background: #ccc url('https://638183.freep.cn/638183/t24/w5/field.webp') no-repeat center/cover;
                box-shadow: 4px 6px 8px rgba(0,0,0,.6);
                --state: running;
                --offsetX: 81px;
        }
        #ma {
                position: absolute;
                width: 15vw;
                height: 15vw;
                background: tan url('https://638183.freep.cn/638183/small/envelop.jpg') no-repeat center/cover;
                border-radius: 50%;
                opacity: 0.7;
                box-shadow: 0 0 16px rgba(0,0,0,.35);
                transition: 1s;
                cursor: pointer;
                animation: rot 10s linear infinite var(--state);
        }
        #ma:hover { filter: invert(1); }
        #msvg { position: absolute; pointer-events: none; }
        #msvg rect { animation: move 18s var(--delay) linear infinite alternate var(--state), fade 1s var(--delay) linear infinite alternate var(--state); }
        #btnFs { bottom: 20px; color: snow; }
        @keyframes rot {
                to { transform: rotate(360deg); }       
        }
        @keyframes move {
                to { x : 0; y: 0; }
        }
        @keyframes fade {
                to { opacity: 0; }
        }
</style>

<div id="pa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=848470" autoplay loop></audio>
        <div id="ma"></div>
        <svg id="msvg" width="100%" height="100%" viewBox="-80 -45 160 90"></svg>
</div>

<script type="module">
        import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
        import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';

        var dr = Dr.dr(msvg);
        var lzCount = 60;
        Array.from({length: lzCount}).forEach((_,idx) => {
                var x = Math.random() * 80 * (Math.random() > 0.5 ? 1 : -1),
                        y = Math.random() * 45 * (Math.random() > 0.5 ? 1 : -1),
                        s = Math.random() + 1,
                        d = Math.random() * -18,
                        c = '#' + Math.random().toString(16).substring(2,8);
                dr.rect(x,y,s,s,c,'none',0,'50%','50%').style(`--delay: ${d}s`);
        });

        FS(pa, ma);
</script>

马黑黑 发表于 2025-8-28 12:21

<div class="codebox">
&lt;style&gt;
        #pa {
                margin: 20px 0;
                position: relative;
                display: grid;
                place-items: center;
                left: calc(50% - var(--offsetX));
                transform: translateX(-50%);
                width: clamp(800px, 100vw, 1440px);
                height: clamp(450px, 56.25vw, 810px);
                box-sizing: border-box;
                background: #ccc url('https://638183.freep.cn/638183/t24/w5/field.webp') no-repeat center/cover;
                box-shadow: 4px 6px 8px rgba(0,0,0,.6);
                --state: running;
                --offsetX: 81px;
        }
        #ma {
                position: absolute;
                width: 15vw;
                height: 15vw;
                background: tan url('https://638183.freep.cn/638183/small/envelop.jpg') no-repeat center/cover;
                border-radius: 50%;
                opacity: 0.7;
                box-shadow: 0 0 16px rgba(0,0,0,.35);
                transition: 1s;
                cursor: pointer;
                animation: rot 10s linear infinite var(--state);
        }
        #ma:hover { filter: invert(1); }
        #msvg { position: absolute; pointer-events: none; }
        #msvg rect { animation: move 18s var(--delay) linear infinite alternate var(--state), fade 1s var(--delay) linear infinite alternate var(--state); }
        #btnFs { bottom: 20px; color: snow; }
        @keyframes rot {
                to { transform: rotate(360deg); }       
        }
        @keyframes move {
                to { x : 0; y: 0; }
        }
        @keyframes fade {
                to { opacity: 0; }
        }
&lt;/style&gt;

&lt;div id="pa"&gt;
        &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=848470" autoplay loop&gt;&lt;/audio&gt;
        &lt;div id="ma"&gt;&lt;/div&gt;
        &lt;svg id="msvg" width="100%" height="100%" viewBox="-80 -45 160 90"&gt;&lt;/svg&gt;
&lt;/div&gt;

&lt;script type="module"&gt;
        import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
        import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';

        var dr = Dr.dr(msvg);
        var lzCount = 60;
        Array.from({length: lzCount}).forEach((_,idx) =&gt; {
                var x = Math.random() * 80 * (Math.random() &gt; 0.5 ? 1 : -1),
                        y = Math.random() * 45 * (Math.random() &gt; 0.5 ? 1 : -1),
                        s = Math.random() + 1,
                        d = Math.random() * -18,
                        c = '#' + Math.random().toString(16).substring(2,8);
                dr.rect(x,y,s,s,c,'none',0,'50%','50%').style(`--delay: ${d}s`);
        });

        FS(pa, ma);
&lt;/script&gt;
</div>

<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script>

马黑黑 发表于 2025-8-28 12:45

只是尝试一下不使用 aspect-ratio 属性强制 16:9 的其它实现方式。这里使用的是 clamp 属性，它是酱紫：

      clamp(Min, Val, Max);

参数的意思依次为：最小值，首选值，最大值。

逻辑是：当 Val 值小于 Min 则用 Min，当 Val 值大于 Max 则用 Max，否则，当 Val 即不小于 Min 也不大于 Max，就用 Val。

第 9 行代码：

      width: clamp(800px, 100vw, 1440px);

意思是，如果 100vw（vw是屏幕宽度单位，100vw是全宽尺寸）小于 800px，就用 800px 作为 pa 的宽度，如果 100vw 大于 1440px，就用 1440px 作为 pa 的宽度值；如果既不小于也不大于边界值，则使用 100vw。

第 10 行代码则设置 pa 的高度，里面 Val 值是 52.6vw，这是强制19:9的核心（100*9/16）。

这样，针对电脑屏幕而言，如果分辨率横向值大于 1400 像素，将得到 1400px 的帖子宽度，帖子高度则是 810px；如果低于 1400 像素，则根据实际值取 800px ~ 100vw 之间的值，具体是，当屏幕横向分辨率大于 800px 就取 100vw 即占满屏幕宽度，否则就是 800 px的宽度。pa 的高度则以 16:9 计算出数值。

本帖只是做了较为粗糙的设置，应该存在不合理的考虑。

马黑黑 发表于 2025-8-28 12:49

tz01.css 其实也用到 clamp 属性，它那里不设置帖子高度，通过 aspect-ratio 属性强制按 16:9 设置高度。这个属性是几年前就已经进入正式的CSS3标准，但基于移动端老旧的浏览器可能不支持（我们碰到过）。本帖的测试缘由之一就是考虑兼容性问题。

梦江南 发表于 2025-8-28 16:14

漂亮的小播放器，变色更好看。黑黑老师辛苦了！{:4_190:}

杨帆 发表于 2025-8-28 16:27

新思路，新探索，新效果，谢谢马老师经典分享{:4_191:}

当 Val 值小于 Min 则用 Min？

马黑黑 发表于 2025-8-28 16:58

杨帆 发表于 2025-8-28 16:27
新思路，新探索，新效果，谢谢马老师经典分享

当 Val 值小于 Min 则用 Min？

换一种说法：

当首选值比最小值要小时，则使用最小值。
当首选值介于最小值和最大值之间时，用首选值。
当首选值比最大值要大时，则使用最大值。

马黑黑 发表于 2025-8-28 16:59

梦江南 发表于 2025-8-28 16:14
漂亮的小播放器，变色更好看。黑黑老师辛苦了！

这个简简单单的播放器，任何一个图片都可以正常类似的效果

杨帆 发表于 2025-8-28 19:39

马黑黑 发表于 2025-8-28 16:58
换一种说法：

当首选值比最小值要小时，则使用最小值。


比如：width: clamp(800px, 100vw, 1440px);，这里的首选值是100vw，该如何理解呢？谢谢老师{:4_190:}

红影 发表于 2025-8-28 20:00

马黑黑 发表于 2025-8-28 12:45
只是尝试一下不使用 aspect-ratio 属性强制 16:9 的其它实现方式。这里使用的是 clamp 属性，它是酱紫：

...

里面 Val 值是 52.6vw，这是强制19:9的核心（100*9/16）

如果按16:9的比率，则100vm对应的是100*9/16=56.25，不是52.5啊{:4_173:}

红影 发表于 2025-8-28 20:16

也就是说，宽度在最小值800和最大值1440之间的时候，直接使用100vm，宽度全屏的数值，高度用16:9 得到高度，也就是高度非全屏，所以帖子里的全屏按钮还是有用的{:4_187:}

红影 发表于 2025-8-28 20:17

这些闪烁的多彩粒子很漂亮{:4_187:}

杨帆 发表于 2025-8-28 21:41

动态彩色粒子形态自然，动态自如，效果棒棒的，谢谢马老师精彩分享{:4_191:}

小辣椒 发表于 2025-8-28 21:57

马黑黑 发表于 2025-8-28 12:49
tz01.css 其实也用到 clamp 属性，它那里不设置帖子高度，通过 aspect-ratio 属性强制按 16:9 设置高度。这 ...

我现在直接套用测试一个看看效果

马黑黑 发表于 2025-8-28 22:07

杨帆 发表于 2025-8-28 19:39
比如：width: clamp(800px, 100vw, 1440px);，这里的首选值是100vw，该如何理解呢？谢谢老师

800px是下限，1400px是上限，就是讲，首选值不突破800px和1400px时，使用首选值，具体是，横向分辨率不小于800px也不大于1400px时用 100vw 来作为 pa 这个div的宽度，例如 1024*768 这样的分辨率，100vw 等于 1024px，用完横向分辨率的像素。这意味着，在这样的设定里，pa 的宽度最小保持在 800px、最大不超过 1400 px

马黑黑 发表于 2025-8-28 22:07

小辣椒 发表于 2025-8-28 21:57
我现在直接套用测试一个看看效果

嗯，挺好，不过这个设置是粗糙的设置

马黑黑 发表于 2025-8-28 22:07

杨帆 发表于 2025-8-28 21:41
动态彩色粒子形态自然，动态自如，效果棒棒的，谢谢马老师精彩分享

{:4_190:}

小辣椒 发表于 2025-8-28 22:09

马黑黑 发表于 2025-8-28 22:07
嗯，挺好，不过这个设置是粗糙的设置
我用了个图测试效果不错，中间的粒子我加多了数量，效果很好

马黑黑 发表于 2025-8-28 22:09

红影 发表于 2025-8-28 20:00
里面 Val 值是 52.6vw，这是强制19:9的核心（100*9/16）

如果按16:9的比率，则100vm对应的是100*9/16= ...

额，数据有误也有可能，但可能是考虑到其它方面的问题。最后的修正数值设置请参阅：

http://mhh.52qingyin.cn/art/bshow.php?st=1&sd=1&art=mahei_1756357574

前面说过，这是粗糙的设置，主要是像验证以下能否行得通

马黑黑 发表于 2025-8-28 22:10

红影 发表于 2025-8-28 20:17
这些闪烁的多彩粒子很漂亮

动画里面的巧妙之处与 viewBox 息息相关，希望能看得出来

查看完整版本: 远野（测试clamp设置16比9分辨率）