отзывчивого 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 wide) элементы li выравниваются хорошо, но когда я изменяю размер моего браузера, элементы не выравниваются.

Я использую твитер-бутстрап-каркас.

Мой вопрос в том, как я могу сделать эти элементы масштабными, когда разрешение ниже?

Спасибо!

Answer 1

Для гибкого дизайна вы можете использовать систему бутстрапов в своей карусели, добавив правильный класс к вашему коду .span4.span8 и т. Д. Он изменит размер вашей карусели с размером браузера, но система сетки имеет фиксированный размер, который может не соответствовать вашим потребностям. Затем вам нужно перезаписать некоторые размеры с помощью собственного css, но с этим может быть сложно справиться, если вы уже используете сетчатую систему на своем сайте.

Это док-сайт grid system

Второй подход заключается в использовании em или % для вашего размера карусельных элементов и элементов кузова. С некоторыми медиа-запросами http://www.w3.org/TR/css3-mediaqueries/ вы можете установить, как карусель изменяется в более низких разрешениях. 1 em обычно будет равным 16px. Расчет вашего нового размера Ест немного сложнее, вы разделите 1 по размеру родительского контейнера, ведьмы является элементом тела с 16px размером шрифта и умножить на ваш текущий 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; 
} 

Совет. Если вы хотите, чтобы это фоновое изображение было scalled, тоже используйте свойство 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 в резолюции ниже, чем 1170px и 0.75em*20em = 15em в резолюции ниже, чем 800px.

Надеюсь, что это поможет!