CSS - 響應式推薦滑塊文本即使將滑塊設置爲100％寬度也不會調整大小

Question

即使滑塊設置爲100％寬度，響應性推薦滑塊文本也不會調整大小 所有其他類和div也設置爲100％，但由於某種原因，當我調整屏幕的大小，它保持很大，並在屏幕上被切斷。

的jsfiddle演示這裏：https://jsfiddle.net/fjkL61va/

---

的Html

---

<div id="slides" style="background:red;"> 

    <ul> 

    <li class="slide"> 
     <h2>"m gravida elit vitae volutpat ornare. Morbi pellentesque vehicula urna ut sagittis. Nunc euismod fermentum vehicula."</h2> 
    </li> 

    <li class="slide"> 
     <h2>"m gravida elit vitae volutpat ornare. Morbi pellentesque vehicula urna ut sagittis. Nunc euismod fermentum vehicula."</h2> 
    </li> 

    <li class="slide"> 
     <h2>"m gravida elit vitae volutpat ornare. Morbi pellentesque vehicula urna ut sagittis. Nunc euismod fermentum vehicula."</h2> 
    </li> 

    </ul> 

</div> 


    <div id="buttons"> 

    <a id="prev" href="#">&lt;</a> 

    <a id="next" href="#">&gt;</a> 

    </div> 

---

CSS

---

#slides { 
    width: 100%; 
    height: auto; 
    overflow: hidden; 
    position: relative; 
    } 

    #slides ul { 
    width: 100%; 
    height: auto; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    } 

    #slides li { 
    width: 100%; 
    height: auto; 
    float: left; 
    text-align: center; 
    position: relative; 
    } 

    #prev { 
    float: left; 
    font-size: 300%; 

    } 
    #next { 
    float: right; 
    font-size: 300%; 

    } 

---

的Javascript

---

 $(document).ready(function() { 
    //rotation speed and timer 
    var speed = 5000; 

    var run = setInterval(rotate, speed); 
    var slides = $('.slide'); 
    var container = $('#slides ul'); 
    var elm = container.find(':first-child').prop("tagName"); 
    var item_width = container.width(); 
    var previous = 'prev'; //id of previous button 
    var next = 'next'; //id of next button 
    slides.width(item_width); //set the slides to the correct pixel width 
    container.parent().width(item_width); 
    container.width(slides.length * item_width); //set the slides container to the correct total width 
    container.find(elm + ':first').before(container.find(elm + ':last')); 
    resetSlides(); 


    //if user clicked on prev button 

    $('#buttons a').click(function (e) { 
    //slide the item 

    if (container.is(':animated')) { 
     return false; 
    } 
    if (e.target.id == previous) { 
     container.stop().animate({ 
     'left': 0 
     }, 1500, function() { 
     container.find(elm + ':first').before(container.find(elm + ':last')); 
     resetSlides(); 
     }); 
    } 

    if (e.target.id == next) { 
     container.stop().animate({ 
     'left': item_width * -2 
     }, 1500, function() { 
     container.find(elm + ':last').after(container.find(elm + ':first')); 
     resetSlides(); 
     }); 
    } 

    //cancel the link behavior  
    return false; 

    }); 

    //if mouse hover, pause the auto rotation, otherwise rotate it 
    container.parent().mouseenter(function() { 
    clearInterval(run); 
    }).mouseleave(function() { 
    run = setInterval(rotate, speed); 
    }); 


    function resetSlides() { 
    //and adjust the container so current is in the frame 
    container.css({ 
     'left': -1 * item_width 
    }); 
    } 

}); 
//a simple function to click next link 
//a timer will call this function, and the rotation will begin 

function rotate() { 
    $('#next').click(); 
} 

Answer 1

您可以使用媒體查詢文本。