响应式布局与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字体大小基准值
- 打开设置快捷键是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使用
- 创建文件夹结构
-
创建html骨架结构
-
引入相关样式文件
- 书写内容
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.移动端主流方案
- 单独制作移动端页面(主流)
- 响应式页面兼容移动端(其次)