響應CSS背景屬性

-1

<ol class="carousel-indicators"> 

<li data-target="#ShowCarousel-03" data-slide-to="0" class="active"> 
    <h4>Title</h4><br/><h5>Text</h5><br/><span>+</span> 
</li> 

<li data-target="#ShowCarousel-03" data-slide-to="1"> 
    <h4>Title</h4><br/><h5>Text</h5><br/><span>+</span> 
</li> 

<li data-target="#ShowCarousel-03" data-slide-to="2"> 
    <h4>Title</h4><br/><h5>Test</h5><br/><span>+</span> 
</li> 

<li data-target="#ShowCarousel-03" data-slide-to="3"> 
    <h4>Title</h4><br/><h5>Text</h5><br/><span>+</span> 
</li>

這個CSS：

.carousel-indicators li{ 
    display:block; 
    float:left; 
    background: url(images/triangle.png) no-repeat; 
    width:320px; 
    height:176px; 
    cursor: pointer; 
    text-align:center; 
}

和我的標記的div容器的寬度設定爲100％

在我的實際分辨率（1366px寬）上li元素對齊好，但是當我調整我的瀏覽器的元素不對齊。

我正在使用twitter引導框架。

我的問題是如何在分辨率較低時使這些元素縮放？

謝謝！

來源

2013-04-05 agis

發佈一個jsFiddle，並告訴我們你期望元素在較小的尺寸上做什麼。 – Charlie 2013-04-05 01:11:12

我想這是您之前對此問題的更新：http://stackoverflow.com/questions/15822493/responsive-images-inside-a-full-width-div – 2013-04-05 01:23:18

對於響應式設計，你可以通過添加適當的類代碼.span4.span8等，將調整與瀏覽器大小的旋轉木馬使用的引導電網系統中的旋轉木馬，但電網系統已修復，可能無法滿足您的需求大小。然後你需要用你自己的css覆蓋一些尺寸，但是如果你已經在你的網站中使用網格系統，這可能很難處理。

這是商務部網站grid system

第二種方法是使用em或%您的傳送帶元素的大小和身體的元素。通過一些媒體查詢http://www.w3.org/TR/css3-mediaqueries/，您可以設置輪換更低分辨率的輪播方式。 1 em通常等於16px。新的EM大小的計算是有點棘手，您可以通過父容器的大小劃分1，whitch爲主體元素與16px font-size和你當前px尺寸乘以：

1/16px*320px = 20em

CSS：

body { 
    font-size:1em; /* 16px */ 
} 

.carousel-indicators li{ 
    display:block; 
    float:left; 
    background: url(images/triangle.png) no-repeat; 
    width:20em; /* 1/16px*320px = 20em */ 
    height:11em; /* 1/16px*176px = 20em */ 
    cursor: pointer; 
    text-align:center; 
}

提示。如果您希望該背景圖像也被調用，則還應使用background-size屬性。

background-size:20em 11em;

尺寸屏幕下部則1170px：

@media (max-width:1170px){ 
    body { 
     font-size: 0.875em; /* 14px */ 
    } 
@media (max-width:800px){ 
    body { 
     font-size: 0.75em; /* 12px */ 
    }

你li元素寬度將automaticaly在分辨率更改爲0.875em*20em = 17.5em下再1170px和0.75em*20em = 15em在較低分辨率然後800像素。

希望有幫助！

來源

2013-04-05 07:16:19 Dmonix

謝謝！它正在工作。 – agis 2013-04-05 15:42:03

響應CSS背景屬性

回答

相關問題