响应式
什么是响应式布局
响应式布局(respond layout)是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端(手机、平板、pc电脑) ——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
为什么要有响应式布局?
- 在移动互联日益成熟的时候,在PC端开发的网页已经无法满足移动设备的要求。
- 通常的做法是针对移动端单独做一套特定的版本。
- 如果终端越来越多,那么需要开发的版本就会越来越多(大屏设备的普及)
- 响应式布局 :一个网站能够兼容多个终端(节约开发成本)
优点:
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点:
兼容各种设备工作量大,效率低下
代码累赘,会出现隐藏无用的元素,加载时间加长
响应式开发现状:
- 如果已经存在PC的网站了,那么一般不会使用响应式开发,而是针对移动端再开发一套系统(比如京东、淘宝)
- 在新建站点 上采用响应式开发的越来越多。
- 在国内,响应式开发还不是特别的流行。但响应式开发是大势所趋,会越来越流行。
响应式开发与移动web开发的比较
开发方式 | 移动web开发+pc开发 | 响应式开发 |
---|---|---|
引用场景 | 一般已经有了PC端网站,只需要端独开发移动端网站即可 | 针对一些新建网站,并且要求适配移动端 |
开发 | 针对性强,开发效率高 | 兼容各种终端,效率低 |
适配 | 只能适配移动端或者PC端,pad上体验比较差 | 可以适配各种终端 |
效率 | 代码简介,加载快 | 代码相对复杂,加载慢 |
//思考:响应式开发的原理是什么?
媒体查询
媒体查询(Media Query)是CSS3提出来的一个新的属性,通过媒体查询可以查询到screen的宽度,从而指定某个宽度区间的网页布局。
设备分类
分类 | 宽度范围 |
---|---|
大屏设备 | >1200px |
中屏设备 | 992px~1200px |
小屏设备 | 768px~992px |
超小屏设备 | < 768px |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iaLpC5fJ-1572574097764)(D:\ITClass\myself\就业班\day08\1.png)]
媒体查询的使用
需求:
<!--
需求:
大屏设备(>1200px) 版心:1170px 背景色:红色
中屏设备(992-1200) 版心:970px 背景色:蓝色
小屏设备(768-992) 版心:750px 背景色:黄色
超小屏设备(<768px) 版心:100% 背景色:绿色
-->
响应式开发的原理:使用媒体查询实现不同终端的布局和样式的切换。
媒体查询语法:
/*查询屏幕*/
@media screen and 条件 {
}
/*条件的写法*/
/*min-width:只要屏幕宽度超过这个值的设备样式就能生效*/
/*max-width:只要屏幕宽度小于这个值的设备样式就能生效*/
@media screen and (min-width: 1200px) {
.container {
width: 1170px;
background-color: red;
}
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
.container {
width: 970px;
background-color: blue;
}
}
@media screen and (min-width: 768px) and (max-width: 992px) {
.container {
width: 750px;
background-color: yellow;
}
}
@media screen and (max-width: 768px) {
.container {
width: 100%;
background-color: green;
}
}
注意: 媒体查询仅仅是一个css使用的限制条件,并不会增加css的权重
弊端:现在只有一个div,要做一套响应式布局,就需要如此多的代码,非常的麻烦,因此我们会更多的借助一些响应式的框架,比如bootstrap。
bootstrap框架
Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。
特点:
- 组件简洁大方、代码规范精简、界面自定义性强。
- Bootstrap是基于HTML5和CSS3开发的, js功能效果依赖于 jQuery( 第三方库, 后面讲解 )。
- Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。
优点:
- 有自己的生态圈,不断的更新迭代
- 提供了一套简洁、直观、强悍的组件
- 标准化的HTML+CSS编码规范
- 让开发更简单,提高了开发效率。
- 扩展性强,虽然界面组件样式已经定义好了,我们还可以自定义,修改默认样式。
版本:
- 2.x.x 停止维护
- 优点:兼容性好
- 缺点:代码不够简洁、功能不够完善
- 3.x.x 目前使用最多
- 优点:稳定,偏向于开发响应式布局,移动设备优先的WEB项目
- 缺点:放弃了IE67,对IE8支持但是界面效果不友好
- 4.x.x 阶段
基本模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>bootstrap基本模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!--引入bootstrap的核心样式文件-->
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>你好,世界!</h1>
<!-- 引用JS文件,对于现阶段直接复制即可 -->
<script src="lib/jquery/jquery-1.12.4.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
全局样式
container容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。默认带了15px的padding值。
.container
类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div>
.container-fluid
类用于 100% 宽度,占据全部视口(viewport)的容器。
<div class="container-fluid">
...
</div>
这两种 容器类不能互相嵌套。
栅格系统
栅格系统,也叫网格系统
栅格系统: 是BS实现响应式的核心所在 其底层也是媒体查询
栅格系统: 不管在什么大小的容器里面,都将这个容器分为12份,在不同大小屏幕里面,占的份数不同
最终目的: 在任何大小的屏幕上 都有较好的浏览体验
// 假设我现在有12个盒子
如果是大屏幕设备, 每行放 6 个 div,
如果是中屏设备, 每行放 4 个 div,
如果是小屏设备, 每行放 3 个 div,
如果是超小屏设备, 每行放 2 个 div,
大屏 6个div 两 12份 一个div占2份 放6个 大屏上: 16.666% 浮动
中屏 4个div 三 12份 一个div占3份 放4个 中屏上: 25% 浮动
小屏 3个div 四 12份 一个div占4份 放3个 小屏上: 33.33% 浮动
超小屏 2个div 六 12份 一个div占6份 放2个 超小屏: 50% 浮动
.row
用于抵消.container
容器的15px的padding值- 可以在
.row
中嵌套column
栅格系统常用类(总共12列)
类名 | 例子 | 解释 |
---|---|---|
.col-xs-xx | .col-xs-6 | 在超小屏幕(及以上)生效 |
.col-sm-xx | .col-sm-6 | 在小屏幕(及以上)生效 |
.col-md-xx | .col-md-6 | 在中屏幕(及以上)生效 |
.col-lg-xx | .col-lg-3 | 在大屏幕及生效,占1/4 |
.col-lg-xx | .col-lg-4 | 在大屏幕及生效,占1/3 |
.col-lg-xx | .col-lg-5 | 在大屏幕及生效,占1/2 |
【案例:响应式栅格系统】
<!--
需求: 6个盒子
1. 大屏幕一行3个
2. 中屏幕一行3个
3. 小屏幕一行2个
4. 超小屏幕一行1个
-->
【案例:列嵌套.html】
<div class="col-lg-4">
<!--栅格系统无处不在,只要父盒子有宽度,就可以使用栅格系统-->
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>
</div>
【案例:列偏移.html】
<!-- 使用 .col-md-offset-* 类可以将列向右侧偏移。-->
<div class="row">
<div class="col-lg-3"></div>
<!--col-lg-offset-3:在大屏下,这个div将向右侧偏移3个单位-->
<div class="col-lg-6 col-lg-offset-3"></div>
</div>
响应式工具
//1. 大屏显示
//2. 中屏不显示
//3. 小屏显示
//4. 超小屏不显示
推荐使用hidden相关的属性