本文转载自我的个人博客。
本文讲解如何利用纯原生的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标签的背景色改为浅绿色。而对于别的媒体类型，比如打印机，则不会生效。更多关于媒体查询的用法，可以参考这个网站。
以上就是第一期的内容，我们下期见。
网友评论