使用媒体查询使图像响应

时间：2016-11-17 10:45:23

标签： html css

任何人都可以使用媒体查询帮助使此列表布局针对不同的屏幕大小做出响应吗？目前，它是一种根据屏幕尺寸调整的流畅布局。我需要建议使用媒体查询。

我的原始代码位于https://jsfiddle.net/7qsp1k0o/2/ 

.item.list-group-item {
  float: none;
  width: 100%;
  background-color: #fff;
  margin-bottom: 10px;
}
.item.list-group-item .list-group-image {
  margin-right: 10px;
}
.item.list-group-item .thumbnail {
  margin-bottom: 0px;
}
.item.list-group-item .caption {
  padding: 9px 9px 0px 9px;
}
.item.list-group-item:before,
.item.list-group-item:after {
  display: table;
  content: " ";
}
.item.list-group-item img {
  float: left;
}
.item.list-group-item:after {
  clear: both;
}
.list-group-item-text {
  margin: 0 0 11px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <div id="products" class="row list-group ">
    <div class="item  col-xs-4 col-lg-4 list-group-item">
      <div class="thumbnail">
        <img class="group list-group-image" src="http://placehold.it/400X250/000/fff" alt="" />
        <div class="caption">
          <h4 class="group inner list-group-item-heading">
                        Activity title</h4>
          <p class="group inner list-group-item-text">
            Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
          <div class="row">
            <div class="col-xs-12 col-md-6">
              <p class="lead">
                Charge : $21.000</p>
            </div>
            <div class="col-xs-12 col-md-6">
              <a class="btn btn-success" href="#">Apply Now</a>
            </div>
          </div>
        </div>
      </div>
    </div>


    <div class="item  col-xs-4 col-lg-4 list-group-item">
      <div class="thumbnail">
        <img class="group list-group-image" src="http://placehold.it/400X250/000/fff" alt="" />
        <div class="caption">
          <h4 class="group inner list-group-item-heading">
                        Activity title</h4>
          <p class="group inner list-group-item-text">
            Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
          <div class="row">
            <div class="col-xs-12 col-md-6">
              <p class="lead">
                Charge : $21.000</p>
            </div>
            <div class="col-xs-12 col-md-6">
              <a class="btn btn-success" href="#">Apply Now</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="item  col-xs-4 col-lg-4 list-group-item">
      <div class="thumbnail">
        <img class="group list-group-image" src="http://placehold.it/400X250/000/fff" alt="" />
        <div class="caption">
          <h4 class="group inner list-group-item-heading">
                        Activity title</h4>
          <p class="group inner list-group-item-text">
            Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
          <div class="row">
            <div class="col-xs-12 col-md-6">
              <p class="lead">
                Charge : $21.000</p>
            </div>
            <div class="col-xs-12 col-md-6">
              <a class="btn btn-success" href="#">Apply Now</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

编辑：添加了所需的结果。 我希望文本不应该在图像下面流动，而是整个事物（图像和框）应缩小以适应屏幕尺寸。

1 个答案:

答案 0 :(得分：0)

造型是基于创造力，但这可能对你有帮助.. 

<div class="container">
    <div class="row">
        <!-- BEGIN PRODUCTS -->
        <div class="col-md-3 col-sm-6 col-xs-12">
            <span class="thumbnail">
                <img src="http://placehold.it/500x400" alt="...">
                <h4>Product Tittle</h4>
                <div class="ratings">
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star-empty"></span>
                </div>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                <hr class="line">
                <div class="row">
                    <div class="col-md-6 col-sm-6">
                        <p class="price">$29,90</p>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <button class="btn btn-success right" > BUY ITEM</button>
                    </div>

                </div>
            </span>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <span class="thumbnail">
                <img src="http://placehold.it/500x400" alt="...">
                <h4>Product Tittle</h4>
                <div class="ratings">
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star-empty"></span>
                </div>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                <hr class="line">
                <div class="row">
                    <div class="col-md-6 col-sm-6">
                        <p class="price">$29,90</p>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <button class="btn btn-success right" > BUY ITEM</button>
                    </div>

                </div>
            </span>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <span class="thumbnail">
                <img src="http://placehold.it/500x400" alt="...">
                <h4>Product Tittle</h4>
                <div class="ratings">
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star-empty"></span>
                </div>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                <hr class="line">
                <div class="row">
                    <div class="col-md-6 col-sm-6">
                        <p class="price">$29,90</p>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <button class="btn btn-success right" > BUY ITEM</button>
                    </div>

                </div>
            </span>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <span class="thumbnail">
                <img src="http://placehold.it/500x400" alt="...">
                <h4>Product Tittle</h4>
                <div class="ratings">
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star-empty"></span>
                </div>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                <hr class="line">
                <div class="row">
                    <div class="col-md-6 col-sm-6">
                        <p class="price">$29,90</p>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <button class="btn btn-success right" > BUY ITEM</button>
                    </div>

                </div>
            </span>
        </div>
        <!-- END PRODUCTS -->
    </div>
</div>

和css代码

h4{
    font-weight: 600;
}
p{
    font-size: 12px;
    margin-top: 5px;
}
.price{
    font-size: 30px;
    margin: 0 auto;
    color: #333;
}
.right{
    float:right;
    border-bottom: 2px solid #4B8E4B;
}
.thumbnail{
    opacity:0.70;
    -webkit-transition: all 0.5s; 
    transition: all 0.5s;
}
.thumbnail:hover{
    opacity:1.00;
    box-shadow: 0px 0px 10px #4bc6ff;
}
.line{
    margin-bottom: 5px;
}
@media screen and (max-width: 770px) {
    .right{
        float:left;
        width: 100%;
    }
}
相关问题
最新问题