适当留白
一般页面即使背景伸展到整个页面的宽度，其内容一般也聚焦在中心，这是由于人在阅读的时候，如果一行太长需要转头，体验就会较差。
所以一般的网页，会有一个wrapper类，将页面的内容控制在页面中部的区域。
在modules目录下新建一个wrapper.css并且导入，在里边编写：
.wrapper {
padding-left: 18px;
padding-right: 18px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
这基本上就是网页的标准wrapper类的样式，以后网页的组织结构类似如下，每一个大区域内部立刻跟着wrapper类：
<div id="header">
<div class="wrapper">
该块具体内容
<div>
<div>
<div id="mainbody">
<div class="wrapper">
......
创建一个DIV元素，类为wrapper，包裹<div class="large-hero__text-content">内部所有元素。
由于现代网页一般图片可以全宽度，底色留白，所以图片无需包裹。如果整个网页要固定宽度，才考虑包裹，但那种一般都是旧式样的网页，现代网页一般都让图片全宽度。
图片显示为块级元素
img元素默认被显示为内联元素，如果为其添加边框等修饰，需要将其转换成块级显示，这样就不会有空白。
在large-hero内部的img元素上添加large-hero__image类，然后编写：
.large-hero {
border-bottom: 10px solid $mainBlue;
...
&__image {
display:block;
}
}
这样图片就有了10像素的下边框，比较好看。
再修改一下各个不同大小情况下的字体和按钮的大小样式，现在版图的部分就结束了。准备制作下一部分，也就是页面里id为our-beginning的DIV元素内部的样式。
各个大区域内留白
观察目标页面，每个区域之间都有大段空白，这个类可以做为每个大区域的div元素的一个样式，可以单独开一个文件，方便调整，在modules目录下边创建_page-section.css，然后导入，在其中设置样式：
.page-section {
padding: 4.5rem;
}
然后把这个样式应用到<div id="our-begging">上，页面好看了很多。然后就来调整其内部的元素。
也按照之前wrapper的方式，用wrapper类包裹内部所有元素。
our-begging区域详细调整
这里主要是标题居中，颜色，字体重量和图片居中的样式。
可以给编写一些主类和modifier类，像wrapper这种类，就可以复用在想居中的元素上。如果宽度要改变，只要给wrapper也定义modifier类即可。
还有在wrapper内部还有wrapper类的时候，可以在CSS样式中嵌套，取消内部的wrapper类的padding，这样就内外一致了
在编写CSS类的时候，合理拆分样式到媒体查询和modifier类中的代码也很重要。
两列浮动显示
这里先用了简单的浮动来实现，在浮动之后还要记得一定要清除浮动。：
.row {
@mixin clearfix;
&__4 {
float:left;
width: 33.33%;
}
/*解决只有一侧设置了padding的简易方法，不会影响计算宽度的总长度，就是外层元素margin设置成负数，然后overflow：hidden*/
/*在父元素，也就是wrapper上设置上overflow hidden*/
&--gutters {
margin-right: -65px;
}
&--gutters>div {
padding-right: 65px ;
}
&__8 {
float: right;
width: 66.66%;
}
}
剩下的微调页面基本上不会再有问题，按照媒体查询来浮动即可。
唯一还需要注意的是img元素上可以使用size="960px"来告诉浏览器这个图片实际要对应的尺寸，但是单独设置这个属性，会导致响应式图片只按这个尺寸加载，因此再搭配媒体查询就可以实现动态加载。
在如今的响应式页面里，图文水平排列已经很少使用浮动了，而是使用更加响应式的列布局。这一部分要解决的就是页面中部图文和文字混排的这部分。
先用一个row类包裹这一片区域，然后可以观察，图片应该是一栏，文字是一栏，在页面很小的时候，这两栏应该重叠。所以需要使用媒体查询结合设置宽度来实现。
实际上这也是很多响应式UI布局的原理，从浮动开始，现在逐渐使用CSS3的fluidbox模型，直到grid系统，也有很多UI开发了自己的grid系统。。
Webstorm支持PostCss格式文件
如果不设置，默认的CSS解析是标准CSS格式，里边的各种嵌套，拼合和变量都会被提示错误。
分为两步：
File | Settings | Plugins中下载安装PostCss插件- 在
File | Settings | Editor | File Types中将.css文件的解析类型设置为PostCss Style Sheet
