菜鸟学习笔记——前端开发——CSS（5） 实例练习

由于上次做网页布局的练习摔得有点惨，这次再找一个练一练，效果见下方动图。

例题网址    http://www.runoob.com/w3cnote/htmlcss-make-a-website.html

这次练习的是——简单的响应式网页

step1：只布局，无响应效果

导航栏由于之前练习过，暂时没什么难度；

中间部分左右分布（一开始用的float）；

下方一个页脚。

这一步马马虎虎完成，然而，调整窗口大小之后，页面就像一坨某某。

step2：响应式

页面宽度小于700px时，中间左右分布->上下分布；

（难到我了。。）

（1）看了答案之后，把普通的盒模型换成了弹性盒，width:30%; 改成了 flex:30%; 这里的flex使用的是flex-basis属性，定义弹性盒中弹性元素的长度。

（2）小于700px时，flex-direction:colomn;

页面宽度小于700px时，横向导航栏->纵向导航栏；

（去掉了浮动，<a>以block形式展示，文字居中，宽度100%）

知识点：

*    响应式网页设计：

响应式网站设计(Responsive Web design)的理念是：

页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

但是响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式。

（——来自百度百科）

*    @media screen and (max-width:XXpx)：

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

*    弹性盒（Flex Box）

弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

*    flex属性：

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

flex-basis属性：

flex-basis 属性用于设置或检索弹性盒伸缩基准值；
注意：如果元素不是弹性盒对象的元素，则 flex-basis 属性不起作用。

flex-wrap属性：

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

flex-direction属性：

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;