本节课讲解B端网页的响应式和栅格,同学们可以在下方评论区进行留言,老师会根据你们的问题进行回复。
那我们开始今天的教程吧。
1.前面我们知道了,浏览器视图区域大小不可控,项目应该如何应对不同分辨率和视图大小呢。
2.比如一个网站,大的视图情况是这样,缩小之后内容还是能看,这样的话是使用了什么东西呢。
3.响应式技术,即动态适配浏览器视图的技术,在不同视图下尽可能完整利用空间显示内容。
4.网页响应式技术是怎么来的?它是从移动互联网兴起后开始发展,主要目标是无缝适配移动端设备的显示需求。
5.来源是因为我们的设备开始多样化,多样化之后就希望设计一套网页,并在其他软件和设备中全都能看的见。
6.B端项目和一般网页的响应需求不同,很多情况下,我们通常不考虑直接支持移动端设备的应用。
7.比如我们看到的很多项目,你会发现手机版本跟网页版本,都是网页的状态,但其实完全不一样。
8.B端项目的响应式通常只面向电脑显示器,也就是我们的浏览器,并会明确的制定内容区域和显示范围。
9.内容区域,即需要应用响应式的实际区域,内容区域不能适配无限大或是无限小。
10.显示范围,即支持的最大宽度和最小宽度,最小显示范围是800px,最大显示范围是2560px。
11.响应式的基本规则,即在这个宽度范围内,有效同步内容区域宽度和内容宽度的过程。
12.案例一,文字的响应式演示,如果在响应式规则范围内拉伸,它就会放大,这个模块本身就会放大。