Измените размер следующего div для отзывчивого дизайна

Question

Как изменить размер следующего <div> для гибкого дизайна, сохраняя точное соотношение?

HTML

<div> 
    <p class="ls-l" data-ls="offsetxin:30; delayin:1000; skewxin:-40; offsetxout:-30; durationout:1000; skewxout:-40;"> 
     <span class="slide-span textStyle"> 
      <strong class="slide2-header bigBlueHeader">Louez votre matériel médical en ligne</strong> 
      <br><br> 
      LMAD est la première solution nationale de <strong>location de matériel médical</strong> 
      <br> 
      en ligne pour le domicile. Une livraison garantie du jour au lendemain<br> 
      <strong>sur toute la France</strong> et sans avance de frais. 
     </span> 
    </p> 
</div> 

CSS

.textStyle { 
    color:#454545; 
    display:inline-block; 
    font-weight:300; 
    font-size:18px; 
    text-align: center; 
    line-height:22px; 
    vertical-align:top; 
    padding:13px 20px 13px 30px; 
    margin:0 0 20px 0; 
    -webkit-border-radius: 3px 3px; 
    -moz-border-radius: 3px 3px; 
    border-radius: 3px 3px; 
    white-space: nowrap; 
} 

.bigBlueHeader { 
    font-weight: 500; 
    font-size:32px; 
    line-height:40px; 
    color:#4195cd; 
    white-space: nowrap; 
    border-bottom: 1px solid #bababa; 
    padding-bottom: 10px; 
} 

И последнее, но не в последнюю очередь здесь является JSFiddle Example того, что есть сейчас.

Answer 1

Я сделал вам скрипку, и добавил фон серого цвета, чтобы вы могли видеть размер пеленального ДИВ: http://jsfiddle.net/revn7LLt/1/

Это использует CSS медиа-запрос. Ширина не менее 360 пикселей будет увеличивать размер div до 360 пикселей в ширину и т. Д. До 1000 пикселей.

CSS:

div { 

    background: #f1f1f1; 
    text-align: center; 
} 

@media screen and (min-width: 360px) { 
    div { 
     width: 360px; 
    } 
} 

@media screen and (min-width: 768px) { 
    div { 
     width: 768px; 
    } 
} 

@media screen and (min-width: 1000px) { 
    div { 
     width: 1000px; 
    } 
}