<div class="wrapper">
  <div class="control">
    <div class="box width" contenteditable="true" style="--width: 100px">固定宽度</div>
    <input type = "range" min="0" max="200" value="100" onchange="rangevalue.value=value" class="widthR" />
    <output id="rangevalue">100</output>px
  </div>
  <div class="control">
    <div class="box percentage" contenteditable="true" style="--percentage: 50%">百分比宽度</div>
    <input type = "range" min="0" max="100" class="percentageR" onchange="rangevalueP.value=value"/>
    <output id="rangevalueP">50</output>%
  </div>
  <div class="control">
    <div class="box min-content" contenteditable="true">使用min-content</div>
  </div>
  <div class="control">
    <div class="box max-content" contenteditable="true">使用max-content的示例</div>
  </div>
  <div class="control">
    <div class="box fit-content" contenteditable="true">使用fit-content()</div>
  </div>
</div>

*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  min-height: 100vh;
  font-family: 'Open sans', sans-serif;
}
body {
  background: linear-gradient(50deg, #f3c680, hsla(179,54%,76%,1));
  display: flex;
  justify-content: center;
  padding: 3vh;
}

.wrapper {
  position: relative;
  width: 50vw;
  background: white;
  border-radius: 15px;
  padding: 3vh;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.control {
  width: 100%;
  padding:4vh 2vh;
}

input[type="range"] {
  -webkit-appearance: none !important;
  height: 15px;
  background-color: #A3CD99;
  border: 1px solid #97c68b;
  border-radius: 10px;
  transition: all 0.3s ease;
  margin-top: 10px;
  width:30vw;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 20px;
  height: 20px;
  background-color: #579E81;
  border-radius: 30px;
  box-shadow: 0px 0px 3px #3c6d59;
  transition: all 0.5s ease;
}

.box {
  background: #755ac3;
  padding: 0.35rem 1rem;
  color: #002b36;
  border-radius: 100px;
  text-align: center;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
  font-size: 1.3rem;
  text-shadow: 1px 1px 1px rgba(255,255,255,.25);
}

.width {
  width: var(--width);
}

.percentage {
  width: var(--percentage);
}

.min-content {
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}

.max-content {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

.fit-content {
  width: -webkit-fit-content(20em);
  width: -moz-fit-content(20em);
  width: fit-content(20em);
}

const widthEle = document.querySelector('.width');
const widthR = document.querySelector('.widthR');
const percentageEle = document.querySelector('.percentage');
const percentageR = document.querySelector('.percentageR');

widthR.addEventListener('change', (e)=>{
  console.log(e.target.value)
  widthEle.style.setProperty("--width", e.target.value + 'px');
})

percentageR.addEventListener('change', (e)=>{
  console.log(e.target.value)
  percentageEle.style.setProperty("--percentage", e.target.value + '%');
})