响应式 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 除以父容器大小，然后将 16px 字体大小的 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;

低于 1170 像素的屏幕尺寸：

@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 像素）。

希望有帮助！