响应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背景属性

回答

相关问题