响应CSS背景属性

Question

我有这个标记：

<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引导框架。

我的问题是如何在分辨率较低时使这些元素缩放？

谢谢！

Answer 1

对于响应式设计，你可以通过添加适当的类代码.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像素。

希望有帮助！