如何使用百分比%实现缩放时文本自适应（替代vw实现方案）

vw单位本质是相对于视口宽度的百分比，1vw = 1%视口宽度，要换成%单位实现相同效果，只需要保证%的参考父元素宽度和vw的参考基准（视口宽度）一致即可，修改步骤如下：

• 第一步：给根元素设置基准宽度，保证从html到目标元素的父级宽度都等于视口宽度，同时添加盒模型规则避免内边距、边框撑宽元素
• 第二步：将原有代码中使用100vw的位置替换为100%即可

修改后完整CSS代码如下：

/* 新增全局基础规则 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  width: 100%;
}

.container{
    display: flex;
    justify-content: space-between;
    align-items:center;
    padding: 1rem 2rem 0.75rem 2rem;
    width: 100%; /* 新增，保证容器宽度占满父级 */
}

.wrapper{
    align-items: center;
    display: flex;
}
.qwe{
    height: 40px;
    width: 40px;
    border: 1px solid #000;
    margin-right:2rem;
}

.main-content{
    /* 把100vw替换为100% */
    max-width: calc(100% - 15rem);
}

.text{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

修改后文本溢出截断、页面缩放适配的效果和原vw版本完全一致。

内容的提问来源于stack exchange，提问作者Camiastrw