Css 简明教程

CSS RWD Media Query

CSS 中的媒体查询是一种通过某些特性、功能和用户偏好定位浏览器的方案，然后在元素上执行或应用样式。

A media query in CSS is a method that targets the browser through some characteristics, features and user preferences and then execute or apply the styles on the elements.

媒体查询在 * @media* 规则中指定，该规则用条件包装元素，描述浏览器何时何地需要应用样式以及何时满足这些条件。

A media query is specified in a @media rule which wraps the element with conditions describing when and where the styles need to be applied when these conditions are met by the browser.

CSS RWD Media Query - width Property

在以下示例中，当视口宽度大于 35em 小于 85em 时，正文背景变为李子色。当视口宽度不匹配该值范围时，则会回退到白色。

In the following example the body’s background is changed to plum when the viewport width is wider than 35em and narrower than 85em. When the viewport width does not match that range of values, then it will fallback to white.

<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   div {
      background-color: white;
      height: 300px;
      width: 300px;
   }

   @media (min-width: 35em) and (max-width: 85em) {
      div {
         background-color: plum;
      }
   }
</style>
</head>
<body>
   <div></div>
</body>
</html>

CSS RWD Media Query - Multiple Breakpoints

在以下示例中，正文背景根据屏幕大小更改为不同的颜色。在媒体查询中使用 * max-width* 和 * min-width* 属性在不同屏幕尺寸下设置多个断点。满足媒体查询的要求时，便会应用样式。

In the following example the body’s background is changed to different colors based on the size of the screen. Multiple breakpoints are set at different screen sizes using the max-width and min-width properties inside the media queries. On meeting the requirements of the media query, the styling is applied.

<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   * {
      margin: 0px;
      padding: 0px;
      box-sizing: border-box;
   }

   body {
      font-family: sans-serif;
      font-size: 35px;
      background-color: aqua;
      height: 1500px;
      width: auto;
   }

   .container {
      border: 4px solid red;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: aliceblue;
   }

   #size {
      position: absolute;
      top: 60%;
      left: 50%;
      transform: translateX(-50%);
      font-size: 35px;
   }

   @media (max-width: 512px){
      .container {
         background-color: plum;
      }
   }

   @media (max-width: 657px) and (min-width: 513px){
      .container {
         background-color: lightyellow;
      }
   }

   @media (max-width: 1000px) and (min-width: 658px) {
      .container {
         background-color: teal;
      }
   }

   @media (min-width: 1001px) {
      .container {
         background-color: bisque;
      }
   }
</style>
</head>
<body>
   <div class="container">Responsive Web Design</div>
   <div id="size"></div>
   <script>
      window.onresize = screen;
      window.onload = screen;

      function screen() {
         checkWidth = window.innerWidth;

         document.getElementById('size').innerHTML = "Width : " + checkWidth + "px";
      }
   </script>
</body>
</html>

CSS RWD Media Query - Using Orientation

在以下示例中，当屏幕方向为横向时，正文背景设置为双色调，导航栏为蓝绿色。当屏幕调整为纵向时，背景色会变为海绿色，导航栏会变成橙色并变为粘性。使用媒体查询实现了相同的特性。

In the following example the body’s background is set to bisque and the navigation bar is teal in color, when the orientation of the screen is landscape. As the screen is resized such that the orientation changes to portrait, the background color changes to seagreen and the navigation bar changes to orange and becomes sticky. The same feature is achieved using the media query.

<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   body {
      background-color: bisque;
   }

   nav {
      block-size: 5rem;
      background: red;

   }

   @media only screen and (orientation: portrait) {
      nav {
            background: orange;
            position: sticky;
            top: 0;
            color: black;
      }
      body {
         background-color: seagreen;
      }
   }
</style>
</head>
<body>

   <nav>Navigation</nav>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>

   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>

   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>

   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>

   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>

   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>

   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>

   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>

   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>

   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
</body>
</html>