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设备类型

值	设备类型
all	所有设备
braille	盲文触觉回馈设备
embossed	盲文打印机
handheld	编写设备
print	打印用纸或打印预览视图
projection	投影设备
screen	电脑显示器
speech	语音或音频合成器
tv	电视机设备
tty	使用固定密度字母栅栏的媒介,如电传打字机和终端

(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.媒体特性

属性	值	min/max	描述
device-width	length	Yes	设置屏幕的输出宽度
device-height	length	Yes	设置屏幕的输出高度
width	length	Yes	渲染界面的宽度
heitht	length	Yes	渲染界面的高度
orientation	portrait/landscape	Yes	横屏或竖屏
resiolution	分辨率	Yes	分辨率
color	整数	Yes	每种色彩的字节数
color-index	整数	Yes	色彩表中的色彩数

语法:@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响应式布局的优缺点

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