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 bootstrap框架。

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

谢谢！

Answer 1

对于响应式设计，您可以在您的轮播中使用引导网格系统，方法是在代码.span4 .span8等中添加适当的类。它将使用浏览器大小调整轮播大小，但网格系统具有固定大小这可能不符合您的需求。然后你需要用你自己的css覆盖一些尺寸，但如果你已经在你的网站中使用了网格系统，这可能很难处理。

这是文档网站grid system

第二种方法是使用em或%作为您的轮播元素大小和正文元素。通过某些媒体查询http://www.w3.org/TR/css3-mediaqueries/，您可以设置轮播在较低分辨率下的变化情况。 1 em通常等于16px。计算新的em大小有点棘手，您将1除以父容器大小，whitch是具有16px font-size的body元素并乘以您当前的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元素宽度会自动更改为0.875em*20em = 17.5em，分辨率低于1170像素，0.75em*20em = 15em分辨率低于800像素。

希望有所帮助！

响应css背景属性

1 个答案: