CSS 响应式布局案例（一）

本文转载自我的个人博客。

本文讲解如何利用纯原生的CSS实现响应式布局。

前段时间在freeCodeCamp看到几个响应式布局的案例。这几个案例把原生CSS实现响应式布局的知识点囊括得比较全面。想着可以总结一下，于是就有了这篇文章，文章应该会分为三期，这是第一期。

案例一

案例演示以及源码网址进去以后点击Fork即可看到源码。

知识点：图片的响应式布局

tribute-page-1.gif

从上图我们可以观察到，图片的大小可以随页面可视区域的变化而变化，但是图片并不会超过它的原始大小。这种方案既保证了图片的完整显示，又不至于被放得过大而失真。实现这一功能的CSS代码其实很简单，让我们来看一看img标签相关的代码：

  //html
  <img id="image" src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" alt "pic from flickr">

  //css
  img{
    max-width: 100%;  //关键代码
    display: block; 
    height: auto;
    margin: auto;
  }

max-width表示img标签可以达到的最大宽度，100%是基于其父级容器元素而言的。一个img标签，如果我们不对它的长宽进行任何设定，那么它的大小将是它所包含的图片的原始大小。但是加上max-width: 100%之后表示，img的宽度将不会超过其容器元素的宽度。这个时候可以分两种情况：

1.容器元素的宽度大于img图片的原始宽度：此时满足max-width: 100%，img将以其图片的原始大小显示。

容器元素的宽度小于img图片的原始宽度，这个时候会将img的宽度调整为其容器元素的宽度。

margin: auto保证img标签永远在容器元素内居中。

display: block和height: auto在本例中其实是不必须的。当你只设定了img标签的width和height中的一个时，图片会自动按比例的缩小或放大。

案例二

案例演示以及源码网址进去以后点击Fork即可看到源码。

知识点：CSS3 新增单位 vw、vh、vmin、vmax

personal-portfolio-1.gif

在上图中我们可以看到，无论我们怎么改变视窗的大小，首屏内容始终恰好占据整个视窗的大小。我们来看一下这一部分的代码：

  //html
  <div id="welcome-section" class="intro">
    <h1>Hey i'am Mimic</h1>
    <p>a web developer</p>
  </div>

  //css
  .intro {
    background: #e0ebe8;
    height: 55vh;  //关键代码
    padding-top: 45vh;  //关键代码
  }

这其中就用到了css的新增单位vh。vh是一个表示浏览器视窗高度的单位，所谓视窗，就是浏览器用来真正显示内容的区域，不包括工具栏等。1vh表示视窗高度的百分之一，100vh表示整个视窗的高度。注意，我们这里虽然是使用了百分号的机制，但是书写的时候不用写百分号，只用写数字就好了。在上端代码中，height和padding-top加起来正好是100vh，所以首屏内容恰好占据整个视窗的大小。

类似于vh的新增单位还有vw、vmin、vmax。大家可以通过这篇文章了解一下。

知识点：媒体查询(@media)

personal-portfolio-2.gif

在上图中我们可以看到，几个圆形链接随着视窗宽度的缩小在不断改变排列方式，到最后变为了长方形，这其中就用到了媒体查询。我们先看一下这部分的相关代码:

  //html
  </div>
    <a href="https://facebook.com/freecodecamp" target="_blank" class="contact-details">Facebook</a>
    <a id='profile-link' href="https://github.com/freecodecamp" target="_blank" class="contact-details">GitHub</a>
    <a href="https://twitter.com/freecodecamp" target="_blank" class="contact-details">Twitter</a>
    <a href="mailto:example@example.com" class="contact-details">Send a mail</a>
    <a href="tel:555-555-5555" class="contact-details">Call me</a>
  </div>

  //css
  .contact-details {
    display: inline-block;   //关键代码
    font-weight: bold;
    margin: 0 35px 45px 35px;
    list-style-type: none;
    border: 2px solid #90C695;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    line-height: 100px;
    background: #e0ebe8;
    color: #008080;
    text-decoration: none;
  }
  .contact-details:hover {
    background: #E4F1FE;
    color: green;
  }
  @media (max-width: 367px) {  //关键代码
    .contact-details {
      border: 2px solid #90C695;
      border-radius: 0;
      width: 90px;
      height: 20px;
      padding: 10px;
      line-height: normal;
    }
  }

圆形链接随着视窗宽度的缩小在不断改变排列方式是通过display: inline-block实现的。inline-block是一种介于inline与block之间的样式。

display: inline-block与display: inline最大的区别是inline-block可以设置自己的宽和高，inline样式不可以。
display: inline-block与display: block最大的区别是inline-block元素后面不会自动加上换行符，所以几个inline-block元素可以排列成一行，而block元素却不可以。

链接由圆形变为长方形是通过媒体查询实现的，媒体查询的标识符是@media。而上段代码中@media (max-width: 367px) {css-code}的含义就是当视窗宽度小于367px时，执行其代码块中的代码css-code。

上例只是媒体查询最简单的一种写法，其完整写法应该为：

  @media not|only mediatype and (expressions) {
    CSS-Code;
  }

其中，mediatype表示媒体类型，有四个可选项：all表示所有类型，print表示打印机，screen表示屏幕(电脑，手机，平板)，speech表示屏幕阅读器。具体用法如下：

  @media only screen and (min-width: 480px) {
    body {
      background-color: lightgreen;
    }
  }

上例的含义是，当且仅当媒体类型为屏幕，宽度大于480px时，将body标签的背景色改为浅绿色。而对于别的媒体类型，比如打印机，则不会生效。更多关于媒体查询的用法，可以参考这个网站。

以上就是第一期的内容，我们下期见。