如何使用 jQuery 或 SCSS 动态调整元素宽度

Question

这是我的第一个stackoverflow问题，请耐心等待。

问题是，每次调整浏览器大小时，图像都会溢出文本。

如何修复虚线元素以使其响应更快，而不是手动添加一些媒体查询？谢谢！

.romanweek-tablewrapper {
  border: 2px solid #000;
  padding: 20px 30px;
  margin: 40px auto;
  display: table;
  width: 85%;
}
.romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist {
  display: table;
  width: 85%;
  margin: 0 auto;
}
.romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 {
  font: 400 16px Lato;
  width: 100%;
  display: inline-block;
}
.romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-schedule {
  text-transform: uppercase;
  position: relative;
  float: left;
}
.romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-schedule::after {
  content: '';
  position: absolute;
  border: 1px dashed rgba(0, 0, 0, 0.5);
  bottom: 5px;
  width: 95px;
  left: 7em;
  transition: 1s all ease;
}
@media screen and (max-width: 1850px) {
  .romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-schedule::after {
    width: 75px;
  }
}
@media screen and (max-width: 1700px) {
  .romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-schedule::after {
    width: 65px;
  }
}
@media screen and (max-width: 1600px) {
  .romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-schedule::after {
    width: 55px;
    left: 6em;
  }
}
@media screen and (max-width: 1400px) {
  .romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-schedule::after {
    width: 35px;
  }
}
@media screen and (max-width: 1300px) {
  .romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-schedule::after {
    width: 25px;
  }
}
@media screen and (max-width: 1200px) {
  .romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-schedule::after {
    width: 15px;
  }
}
@media screen and (max-width: 1100px) {
  .romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-schedule::after {
    width: 0;
  }
}
@media screen and (max-width: 991px) {
  .romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-schedule::after {
    width: 250px;
  }
}
.romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-item-description {
  float: right;
  text-align: left;
  width: 40%;
}

<div class="romanweek-tablewrapper">
  <div class="table-header-wrapper">
    <h1 class="text-blue section-heading">Roman Week</h1>
  </div>
  <div class="menu-list-wrapper">
    <ul class="romanweek-menulist">
      <li>
        <h4 class="menu-item"><span class="menu-schedule">Lunedi</span><span class="menu-item-description">We're closed<br> - You're cooking.</span></h4></li>
      <li>
        <h4 class="menu-item"><span class="menu-schedule">Martedi</span><span class="menu-item-description">Fettuccine</span></h4></li>
      <li>
        <h4 class="menu-item"><span class="menu-schedule">Mercoledi</span><span class="menu-item-description">Coniglio</span></h4></li>
      <li>
        <h4 class="menu-item"><span class="menu-schedule">Geovedi</span><span class="menu-item-description">Gnocchi</span></h4></li>
      <li>
        <h4 class="menu-item"><span class="menu-schedule">Venerdi</span><span class="menu-item-description">Baccala</span></h4></li>
      <li>
        <h4 class="menu-item"><span class="menu-schedule">Sabato</span><span class="menu-item-description">Vitello</span></h4></li>
      <li>
        <h4 class="menu-item"><span class="menu-schedule">Domenica</span><span class="menu-item-description">Lasagna</span></h4></li>
    </ul>
  </div>
</div>

这里是元素的链接 http://prntscr.com/gkwbcm

Answer 1

试试这个：

<style class="cp-pen-styles">
    ul.romanweek-menulist {
        list-style: none;
    }
    ul.romanweek-menulist
     li .menu-schedule {
        width: 8%;
        display: inline-block;
    }
    span.menu-item-description {
        width: 20%;
        display: inline-block;
        vertical-align: middle;
        margin-left: 20px;
    }

    .dashed {
        content: '';
        width: 68%;
        display: inline-block;
        border-bottom: solid 1px dashed #333;
        border-bottom: 1px dashed rgba(0, 0, 0, 0.5);
        vertical-align: middle;
    }
    </style>    
    <div class="romanweek-tablewrapper">
            <div class="table-header-wrapper">
                <h1 class="text-blue section-heading">Roman Week</h1>
            </div>
            <div class="menu-list-wrapper">
                <ul class="romanweek-menulist">
                    <li><h4 class="menu-item"><span class="menu-schedule">Lunedi</span><span class="dashed"></span><span class="menu-item-description">We're closed<br> - You're cooking.</span></h4></li>
                    <li><h4 class="menu-item"><span class="menu-schedule">Martedi</span><span class="dashed"></span><span class="menu-item-description">Fettuccine</span></h4></li>
                    <li><h4 class="menu-item"><span class="menu-schedule">Mercoledi</span><span class="dashed"></span><span class="menu-item-description">Coniglio</span></h4></li>
                    <li><h4 class="menu-item"><span class="menu-schedule">Geovedi</span><span class="dashed"></span><span class="menu-item-description">Gnocchi</span></h4></li>
                    <li><h4 class="menu-item"><span class="menu-schedule">Venerdi</span><span class="dashed"></span><span class="menu-item-description">Baccala</span></h4></li>
                    <li><h4 class="menu-item"><span class="menu-schedule">Sabato</span><span class="dashed"></span><span class="menu-item-description">Vitello</span></h4></li>
                    <li><h4 class="menu-item"><span class="menu-schedule">Domenica</span><span class="dashed"></span><span class="menu-item-description">Lasagna</span></h4></li>
                </ul>
            </div>
        </div>

Answer 2

在高度上使用 % 以便它可以正确缩放。或者，如果您需要它在某个点停止，请使用最小和最大宽度。