响应式布局

媒体查询

@media (条件选择器) {
	div {
		...
	}
}

• max-width 小于等于这个值时满足条件
• min-width 大于等于这个值时满足条件

注意层叠性 min 由小到大 max 由大到小

完整写法

@media 关键字 媒体类型 and (媒体特征) {...}

关键字 ： and only not

媒体类型

类型名称	值	描述
屏幕	screen	带屏幕的设备
打印预览	print	打印预览模式
阅读器	speech	屏幕预览模式
不区分类型	all	默认值

媒体特征

特征名称	属性	值
视口的宽高	width、height
视口的最大宽高	max-width、max-height
视口最小宽高	min-width、min-width
屏幕方向	orientation	portrait: 竖屏 landspace：横屏

外部引入

<link rel="stylesheet" media="(max-width):xxx" href="url"

<link rel="stylesheet" href="./index.css" media="max-width:1200px"

隐藏

@media (max-width:768px){
    .main{
        display: none;
    }
}

Bootsrap

Bootstrap 是由 Twitter 公司开发维护的前端UI框架，它提供了大量编写好的CSS样式，允许开发者结合一定HTML结构及 JavaScript，快速编写功能完善的网页及常见的交互效果

基本使用

引入 Bootstrap.css 文件 引用类 如 .container

栅栏系统

BootStrap3默认将网页分成12份

	超小屏幕	小屏幕	中等屏幕	大屏幕
响应式断点	<768px	>=768px	>=991px	>=1200px
别名	xs	sm	md	lg
容器宽度	100%	750px	970px	1170px
类前缀	col-xs-*	col-sm-*	col-md-*	col-lg-*
列数	12	12	12	12
列间隙	30px	30px	30px	30px

<div class="container">
    <div class="col-lg-3 col-md-6">1 </div> 
    <div class="col-lg-3 col-md-6">2 </div> 
    <div class="col-lg-3 col-md-6">3 </div> 
    <div class="col-lg-3 col-md-6">4</div> 
</div>

类名

contianer 类的的内边距有15px Bootstrap中有大量的15px边距

• contianer : 版心 ， 自带左右15px的内边距
• row ： 行 ， 自带左右-15的外边距 可以抵消版心
• container-fluid ： 宽度100%自带左右15的内边距

具体使用查看文档

完