上一节:
下一节:

  CSS RWD媒体查询

  • 什么是媒体查询？

    媒体查询是CSS3中引入的CSS技术。@media仅当某个条件为真时，它才使用该规则包含一个CSS属性块。 
    @media only screen and (max-width: 600px) {
   body {
     background-color: lightblue;
   }
 }
    尝试一下

  • 添加断点

    在本教程的前面，我们创建了一个包含行和列的网页，它具有响应性，但在小屏幕上看起来不太好。媒体查询可以提供帮助。我们可以添加一个断点，其中设计的某些部分在断点的每一侧都会表现不同。 使用媒体查询在768px处添加断点： 
    /* 桌面系统: */
 .col-1 {width: 8.33%;}
 .col-2 {width: 16.66%;}
 .col-3 {width: 25%;}
 .col-4 {width: 33.33%;}
 .col-5 {width: 41.66%;}
 .col-6 {width: 50%;}
 .col-7 {width: 58.33%;}
 .col-8 {width: 66.66%;}
 .col-9 {width: 75%;}
 .col-10 {width: 83.33%;}
 .col-11 {width: 91.66%;}
 .col-12 {width: 100%;}

 @media only screen and (max-width: 768px) {
   /* 移动端: */
   [class*="col-"] {
     width: 100%;
   }
 }
    尝试一下

  • 始终为移动优先设计

    移动优先意味着在为桌面设备或任何其他设备进行设计之前设计移动设备（这将使页面在较小的设备上显示得更快）。这意味着我们必须在CSS中进行一些更改。当宽度小于768px时，我们应该在宽度大于768px时更改设计，而不是更改样式。这将使我们的设计移动优先： 
    /* For mobile phones: */
 [class*="col-"] {
   width: 100%;
 }

 @media only screen and (min-width: 768px) {
   /* For desktop: */
   .col-1 {width: 8.33%;}
   .col-2 {width: 16.66%;}
   .col-3 {width: 25%;}
   .col-4 {width: 33.33%;}
   .col-5 {width: 41.66%;}
   .col-6 {width: 50%;}
   .col-7 {width: 58.33%;}
   .col-8 {width: 66.66%;}
   .col-9 {width: 75%;}
   .col-10 {width: 83.33%;}
   .col-11 {width: 91.66%;}
   .col-12 {width: 100%;}
 }
    尝试一下

  • 另一个断点

    您可以根据需要添加任意数量的断点。我们还将在平板电脑和手机之间插入一个断点。 我们通过添加一个媒体查询（600px）和一组大于600px（但小于768px）的设备的新类来完成此操作： 
    /* For mobile phones: */
 [class*="col-"] {
   width: 100%;
 }

 @media only screen and (min-width: 600px) {
   /* For tablets: */
   .col-s-1 {width: 8.33%;}
   .col-s-2 {width: 16.66%;}
   .col-s-3 {width: 25%;}
   .col-s-4 {width: 33.33%;}
   .col-s-5 {width: 41.66%;}
   .col-s-6 {width: 50%;}
   .col-s-7 {width: 58.33%;}
   .col-s-8 {width: 66.66%;}
   .col-s-9 {width: 75%;}
   .col-s-10 {width: 83.33%;}
   .col-s-11 {width: 91.66%;}
   .col-s-12 {width: 100%;}
 }

 @media only screen and (min-width: 768px) {
   /* For desktop: */
   .col-1 {width: 8.33%;}
   .col-2 {width: 16.66%;}
   .col-3 {width: 25%;}
   .col-4 {width: 33.33%;}
   .col-5 {width: 41.66%;}
   .col-6 {width: 50%;}
   .col-7 {width: 58.33%;}
   .col-8 {width: 66.66%;}
   .col-9 {width: 75%;}
   .col-10 {width: 83.33%;}
   .col-11 {width: 91.66%;}
   .col-12 {width: 100%;}
 }
    我们有两组相同的类似乎很奇怪，但它给了我们HTML的机会，以决定每个断点处的列会发生什么： HTML示例 对于桌面： 第一部分和第三部分将分别跨越3列。中间部分将跨越6列。 对于平板电脑 第一部分将跨越3列，第二部分将跨越9列，第三部分将显示在前两部分下方，它将跨越12列： 
    <div class="row">
   <div class="col-3 col-s-3">...</div>
   <div class="col-6 col-s-9">...</div>
   <div class="col-3 col-s-12">...</div>
 </div>
    尝试一下

  • 典型设备断点

    有大量的屏幕和设备具有不同的高度和宽度，因此很难为每个设备创建精确的断点。为了简单起见，您可以定位五个组： 
    /* 超小型设备(电话600px及以下) */
 @media only screen and (max-width: 600px) {...}

 /* 小设备(人像平板电脑和大手机，600px及以上) */
 @media only screen and (min-width: 600px) {...}

 /* 中设备(景观平板电脑，768px及以上) */
 @media only screen and (min-width: 768px) {...}

 /* 大型设备(笔记本/台式机，992px及以上) */
 @media only screen and (min-width: 992px) {...}

 /* 超大设备(大型笔记本电脑和台式机，1200px及以上) */
 @media only screen and (min-width: 1200px) {...}
    尝试一下

  • 方向：纵向/横向

    媒体查询还可用于根据浏览器的方向更改页面的布局。您可以拥有一组仅在浏览器窗口宽度超过其高度时应用的CSS属性，即所谓的“横向”方向： 
    @media only screen and (orientation: landscape) {
   body {
     background-color: lightblue;
   }
 }
    尝试一下

  • 使用媒体查询隐藏元素

    媒体查询的另一个常见用途是隐藏不同屏幕尺寸的元素： 
    /* If the screen size is 600px wide or less, hide the element */
 @media only screen and (max-width: 600px) {
   div.example {
     display: none;
   }
 }
    尝试一下

  • 使用媒体查询更改字体大小

    您还可以使用媒体查询来更改不同屏幕大小的元素的字体大小： 
    /* 如果屏幕大小为601px或更大，请将font-size设置为80px */
 @media only screen and (min-width: 601px) {
   div.example {
     font-size: 80px;
   }
 }

 /* 如果屏幕大小为600px或更小，请将font-size设置为30px */
 @media only screen and (max-width: 600px) {
   div.example {
     font-size: 30px;
   }
 }
    尝试一下
    有关所有媒体类型和功能/表达的完整概述，请查看CSS参考中的@media规则。
上一节:
下一节: