CSS clamp()函数基本效果演示实例页面

回到相关文章 »

展示

此时宽度是：

代码

CSS代码：

button {
    width: 300px;
    width: clamp(200px, 50vw, 600px);
}

HTML代码：

<button>我的宽度是？</button>

JS代码：

var eleOutput = document.getElementById('output');
var eleButton = document.querySelector('button');
if (window.ResizeObserver) {
    var objResizeObserver = new ResizeObserver(function (entries) {
        eleOutput.textContent = eleButton.offsetWidth + 'px';
    });
    // 观察文本域元素
    objResizeObserver.observe(eleButton);  
}