Bootstrap_第一章 响应式布局

1.1.2 实现弹性布局的方法

*1.浮动+百分比布局*

.box{
width:100%;
border:1px solid #000;
padding:10px;
}

2.Flex布局
语法:display:flex
综合弹性模型的好处:
1)可以让盒子里的元素排在一行.
2)盒子里面元素的高度相同.
(1)伸缩性flex

.box{
display: flex;
border: 1px solid #000;
padding: 10px;
}
aside{
flex: 1;
background: red;
padding: 10px;
}
article{
flex: 10;/*宽度,伸缩性*/
margin-left: 10px;
background: yellow;
}

(2)伸缩流方向flex-direction
语法:flex-direction:row|row-reverse|column|column-reverse
row:主轴为水平方向,起点在左端.
row-reverse:主轴为水平方向.起点在右端.
column:主轴为垂直方向,起点在上端.
column-reverse:主轴为垂直方向,起点在下端.

.box{

display: flex;
flex-direction: row-reverse;
border: 1px solid #000000;
padding: 10px;
}

(3)伸缩换行flex-wrap
语法:flex-wrap:nowrap|wrap|wrap-reverse
nowrap:默认值.伸缩容器单行显示.伸缩项目不会换行.
wrap:伸缩容器多行显示.伸缩项目会换行
wrap-reverse:伸缩容器多行显示.伸缩项目会换行,并颠倒行顺序.

#main{
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: nowrap;
}
#main div{
width: 50px;
height: 50px;
}

(4)主轴对齐justify-content
语法:justify-content: flex-start| flex-end | center | space-between | space-around
flex-start:伸缩项目向一行的起始位置靠齐.
flex-end:伸缩项目向一行的结束位置靠齐
center:伸缩项目向一行的中间位置靠齐
space-between:伸缩项目会平均分布在行里.
space-around:伸缩项目会平均分布在行里.两端保留一半的空间

#main{
height: 150px;
width: 400px;
border: 1px solid #c3c3c3;
display: flex;
justify-content: center;
}
#main div{
width: 70px;
height: 70px;
}

(5)侧轴对齐align-items
语法:align-items:flex-start|flex-end|center|baseline|stretch
flex-start:伸缩项目在侧轴起始点的外边距紧靠住该行在侧轴起始边.
flex-end:伸缩项目在侧轴起始点的外边距紧靠住该行在册轴终始边.
center:伸缩项目的外边距盒在该行侧轴上居中放置
baseline:伸缩项目根据伸缩项目第一行文字的基线对齐.
stretch:默认值.

#main{
height: 150px;
width: 400px;
border: 1px solid #c3c3c3;
display: flex;
align-items: center;
}
#main div{
width: 70px;
height: 70px;
}

1.2.1 响应式网页设计的概念
响应式网页设计,这个术语是由伊森·马科特提出的.

1.媒体类型
MediaType设备类型

(1)@media方式

我们可以使用@media的方式引入.@media是CSS3中新引入的一个特性.称媒体查询.
@media 媒体类型{
选择器{	/*你的样式代码写在里面...*/	}
}

@media screen and (max-width:1200px ) {
body{
background-color: red;
}
}

(2)link方法

<link rel="stylesheet" href="stylel.css"  media=" 媒体类型"/>

2.媒体特性

语法:@media 媒体类型 and (媒体特性) {
//CSS样式
}

3.关键字

(1)and关键字,表示同时满足这两者时生效,
@media screen and (max-width:1200px){样式代码...}
(2)only关键字,用来指定某种特定的媒体类型
<link rel="stylesheet" href="stylel.css" media="only screen and (max-width:500px)"/>
(3)not关键字,用来排除某种指定的媒体类型
@media not print and (max-width:1200px){样式代码...}

4.媒体查询的使用

(1)遇到冲突时的机制.
(2)设置断点
简单地理解就是,设备宽度的临界点.

1.2.4 响应式布局的应用

(1)响应式布局设计实现的方式有可切换的固定布局.弹性布局和混合布局
可切换的固定布局:
弹性布局:
混合布局:
(2)响应式布局在实际应用中常见的设计模式主要有如下几种方式:
布局不变:
布局改变:

1.2.5响应式布局的优缺点

优点:
面对不同分辨率设备灵活性强,能够快捷解决多设备显示使用问题
更少维护,开发一个网站.多终端使用
缺点:
兼容各种设备,工作量大.
代码累赘,会出现隐藏无用的元素,加载时间长.