如何使用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

用途％的链接，以便它可以正确缩放。或者，如果您需要在某个点停止使用最小和最大宽度。