製作一組浮動元素響應調整大小

Question

我已經將一些元素並排浮動，我想要做的是以某種方式使.line元素在用戶的寬度上縮小，以便在某些方面調整屏幕的大小元素響應。我在想，我可以給.line％寬度或某種溢出，以便當頁面大小向下縮小或者被溢出隱藏時，但這些似乎不起作用。任何人都可以推薦另一種選擇，或者我可以如何讓我的想法奏效我知道我可以使用媒體查詢來改變寬度等，但我想這是自然的，允許不同的文本尺寸/長度等

下面是代碼http://dabblet.com/gist/4753624

CSS

.l { 
    float: left; 
} 
span { 
    display: block; 
} 
.line { 
    border-top: 2px solid #000; 
    width: 300px; 
} 
.icon { 
    background: url('http://dummyimage.com/40/000/fff') no-repeat 0 0; 
    width: 40px; 
    height: 40px; 
    display: inline-block; 
} 

HTML

<div class="holder clearfix"> 
    <div class="headline clearfix"> 
     <span class="l icon ir"></span> 
     <span class="l line"></span> 

     <h1 class="l">Main HEadline</h1> 
     <span class="l line"></span> 
     <span class="l icon ir"></span> 

    </div> 

    <div class="headline clearfix"> 
     <span class="l icon ir"></span> 
     <span class="l line"></span> 

     <h1 class="l">Main HEadline</h1> 
     <span class="l line"></span> 
     <span class="l icon ir"></span> 

    </div> 
</div> 

Answer 1

媒體查詢是你想要什麼：

http://www.w3.org/TR/css3-mediaqueries/

http://css-tricks.com/css-media-queries/

例如

@media screen and (max-width: 768px) { 

    .line { 
      // your css rules 
     } 
}