使用bootstrap 如何做自适应的网页，比如一个大图如何适应手机端和pc端

Question

如题所述

Answer 1

可以用media query媒体查询来设置不同分辨率下的不同css样式

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

给你来一段样例，你看看

@media(min-width: 768px) {
 .ipad
 {
    display: none;
 }
 .mobile
 {
   display: none;
 }
 .pc
 {
   display: block;
 }
 .row {
   margin-left: 0;
   margin-right: 0;
 }
 .home-bg {
   //margin: 0;
   background: url(asset-path("common/home_big3.jpg")) center no-repeat;
   width: 100%;
   height: 500px;
   background-size: cover;
 }
}

@media (max-width: 767px) {


  .ipad
  {
    display: block;
  }
  .mobile
  {
    display: none;
  }
  .pc
  {
    display: none;
  }

  .home-bg {
    background: url(asset_path("common/home_1024.jpg"));
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    //height: 100%;
  }
 }

@media(max-width: 480px) {
  .ipad
  {
    display: none;
  }
  .pc
  {
    display:none;
  }
  .mobile
  {
    display: block;
  }
  .home-bg {
    background: url(asset_path("common/home_640.jpg"));
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 600px;
  }
 }

想必你能理解我的意思

Answer 2

Answer 3

有点难度。。