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

我让你成了小提琴，并添加了灰色背景，这样你就可以看到div改变大小：http://jsfiddle.net/revn7LLt/1/

这使用CSS进行媒体查询。至少360px的宽度将div的大小设置为360px宽，因此最大为1000px。

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;
    }
}

调整以下div的大小以进行响应式设计

1 个答案: