响应式布局与Bootstrap框架

响应式布局与Bootstrap框架

1.rem基础

rem(root em)是一个相对单位，类似em，em是父元素字体大小

不同的是rem的基准是相对于html元素的字体大小

rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制

2.媒体查询

媒体查询(Media Query)是CSS3新语法

@media可以针对不同的屏幕尺寸设置不同的样式

2.1语法规范

@media mediatype and|not|only (media feature){
	css-code;
}

mediatype查询类型

all：用于所有设备

print：用于打印机和打印预览

screen：用于电脑屏幕，平板电脑，智能手机等

关键字

and：可以将多个媒体特性连接到一起

not：排除某个媒体类型

only：指定某个特定的媒体类型

媒体特性

width：定义输出设备中页面可见区域的宽度

min-width：定义输出设备中页面最小可见区域宽度

max-width：定义输出设备中页面最大可见区域宽度

2.2媒体查询+rem实现元素动态大小变化

示例：

CSS代码：

@media screen and (min-width:320px){
	html{
		font-size:50px;
	}
}
@media screen and (min-width:640px){
	html{
		font-size:100px;
	}
}
.top{
	height:1rem;
	font-size: .5rem;
	background-color:green;
	color:#fff;
	text-align:center;
	line-height:1rem;
}

2.3引入资源

当样式比较多时，我们可以针对不同的媒体使用不同stylesheets。

原理，直接在link中判断设备的尺寸，然后引用不同的css文件。

语法规范

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

媒体查询最好的方法是从小到大

示例：

代码：

//style640.css
div{
	width:50%;
	height:100px;
}
div:nth-child(1){
	background-color:pink;
}
div:nth-child(2){
	background-color:purple;
}

//style320.css
div{
	float:left;
	width:100%;
	height:100px;
}
div:nth-child(1){
	background-color:pink;
}
div:nth-child(2){
	background-color:purple;
}

<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)">
<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)">

3.rem适配方案

方案1：less、媒体查询、rem

方案2：flexible.js、rem

3.1设计稿常见尺寸宽度

iphone4.5：640px

iphone678：750px

Android：大部分4.7~5寸的安卓设备为720px

3.2动态设置html标签font-size大小

3.3元素大小取值方法

页面元素的rem值=页面元素值(px)/(屏幕宽度/划分的份数)

屏幕宽度/划分的份数就是html font-size的大小

VScode px转换rem插件cssrem

可以自动将px转换为rem

注意：插件默认的html文字大小cssroot 16px

可以通过设置更改默认文字大小，修改后切记要重启vscode！！！

设置html字体大小基准值

1. 打开设置快捷键是ctrl+逗号

4.响应式开发

4.1响应式开发原理

使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的

4.2响应式布局容器

响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果

5.Bootstrap前端开发框架

5.1 Bootstrap简介

Bootstrap来自Twitter(推特)，是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS和JAVASCRIPT的，它简洁灵活，使得web开发更加快捷。

中文官网：http://www.bootcss.com/

官网：http://getbootstrap.com/

推荐使用：http://bootstrap.css88.com/

优点：

• 标准化的html+css编码规范
• 提供了一套简洁、直观、强悍的组件
• 有自己的生态圈，不断的更新迭代
• 让开发更简单，提高了开发效率

5.2 Bootstrap使用

1. 创建文件夹结构

2. 创建html骨架结构

3. 引入相关样式文件

4. 书写内容

5.3布局容器

container类

• 响应式布局的容器 固定宽度
• 大屏(>=1200px) 宽度定为1170px
• 中屏(>=992px) 宽度定位970px
• 小屏(>=768px) 宽度定位970px
• 超小屏(100%)

container-fluid类

• 流式布局容器 百分百宽度
• 占据全部视口(viewport)的容器
• 适合于单独做移动端开发

6.Bootstrap 栅格系统

6.1栅格系统简介

将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局

6.2栅格选项参数

• 按照不同屏幕划分为1~12等份
• 列大于12，多余的列所在的元素将被作为一个整体另起一行排列
• 每一列默认有左右15px的padding
• 可以同时为一列指定多个设备的类名，一边划分不同份数，如class=“col-md-4 col-sm-6”

6.3列嵌套

添加一个新的.row元素和一系列.col-sm-元素到已经存在的.col-sm-元素内

6.4列偏移

使用.col-md-offset-*类可以将列向右侧偏移。

6.5列排序

使用.col-md-push-*和.col-md-pull- *类就可以改变列的顺序

6.6响应式工具

与之相反，visible-xs visible-sm visible-md visible-lg是显示某个页面内容

7.移动端主流方案

1. 单独制作移动端页面(主流)
2. 响应式页面兼容移动端(其次)