Bootstrap 3 媒体查询

可以参考 Bootstrap  的媒体查询，写网站。

html:

<div class="bootstrap-3-media">
  <p>Mobile-First-Method</p>
  <div class="Mobile-First-Method">

    <div class="px320"><pre>/* Custom, iPhone Retina */ @media only screen and (min-width : 320px) { }</pre></div>
    <div class="px480"><pre>/* Extra Small Devices, Phones */ @media only screen and (min-width : 480px) { }</pre></div>
    <div class="px768"><pre>/* Small Devices, Tablets */ @media only screen and (min-width : 768px) { }</pre></div>
    <div class="px992"><pre>/* Medium Devices, Desktops */ @media only screen and (min-width : 992px) { }</pre></div>
    <div class="px1200"><pre>/* Large Devices, Wide Screens */ @media only screen and (min-width : 1200px) { }</pre></div>

  </div>
  <p>Non-Mobile-First-Method</p>
  <div class="Non-Mobile-First-Method">

    <div class="px320"><pre>/* Custom, iPhone Retina */ @media only screen and (min-width : 320px) { }</pre></div>
    <div class="px480"><pre>/* Extra Small Devices, Phones */ @media only screen and (min-width : 480px) { }</pre></div>
    <div class="px768"><pre>/* Small Devices, Tablets */ @media only screen and (min-width : 768px) { }</pre></div>
    <div class="px992"><pre>/* Medium Devices, Desktops */ @media only screen and (min-width : 992px) { }</pre></div>
    <div class="px1200"><pre>/* Large Devices, Wide Screens */ @media only screen and (min-width : 1200px) { }</pre></div>

  </div>
</div>

css:

// https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries

.px320,
.px480,
.px768,
.px992,
.px1200{
  display: none;
}

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/

    // /*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */
    @media only screen and (min-width : 320px) {
      .Mobile-First-Method .px320{
        display: block;
      }
    }

    /* Extra Small Devices, Phones */
    @media only screen and (min-width : 480px) {
      .Mobile-First-Method .px480{
        display: block;
      }
    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {
      .Mobile-First-Method .px768{
        display: block;
      }
    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
      .Mobile-First-Method .px992{
        display: block;
      }
    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
      .Mobile-First-Method .px1200{
        display: block;
      }
    }

    /*==========  Non-Mobile First Method  ==========*/

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {
      .Non-Mobile-First-Method .px320{
        display: block;
      }
    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {
      .Non-Mobile-First-Method .px480{
        display: block;
      }
    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {
      .Non-Mobile-First-Method .px768{
        display: block;
      }
    }

    /* Extra Small Devices, Phones */
    @media only screen and (max-width : 480px) {
      .Non-Mobile-First-Method .px992{
        display: block;
      }
    }

    /* Custom, iPhone Retina */
    @media only screen and (max-width : 320px) {
      .Non-Mobile-First-Method .px1200{
        display: block;
      }
    }