bootstrap 响应式布局常见设计做法 真实网站案例解析
通常我们做一个网页,通常优先兼容 桌面端、平板端、手机端 三个端,其他则微调,那我们应该如何来做呢?
一般会有设计师 给你三个设计稿,分别是 PC、ipad、mobile 也就是 电脑端、平板端、手机端 这三个设备的。
下面我用 EXLskills 来举个例子,来实际理解一下。
电脑端PC
,一般采用 三列、四列布局,你可以去看看 京东
或者 淘宝
就可以发现,当然也不是死的,特殊情况特殊做法,这里指的是一般情况。
平板端iPad
,一般采用两列布局,因为相对来说平板的屏幕
相对于 手机大一点
但相对于 电脑端又比较小
,两列布局的效果无疑是比较常见的做法,下面是一个真实网站的例子。
手机端mobile
,一般采用一列布局,手机的屏幕很小,一列可以展示更完整,并且在移动端手势下滑是非常容易的,所以用户体验感也很好,而且不会丢失展示内容,在手机端一般采用 Flex 布局进行一列布局
那怎么实现这个网站的效果呢?
答:采用目前前端流行的 CSS样式 bootstrap
响应式框架 进行开发,他包含了很多实用的类、比如给你做好了 媒体查询、多列布局、还有上面效果中导航收缩
功能,你可能已经猜到了,没错上面的示例网站就是 bootstrap
做的,
简单介绍下响应式,响应式简单来说就是 在 不同的设备屏幕上
网站呈现出不一样的布局效果
,就像上面举列的三个端一样。
我简单解析一下这个网站是怎么采用 bootstrap
使网站响应式的。
这个网站使用的 bootstrap 版本
,你可能看到了,他还是使用了 CSS变量,所以你在实际使用的时候是可以根据自已的情况加代码的,bootstrap只是一个你做网站的一个基础
1.整个网站采用 头部 + 主体
两个布局模块
2. 头部有一个导航,采用 Flex
布局
3. 在 电脑端
有一个导航条
4.当设备是 手机
或者 iPade
时候将导航条收缩
头部布局实现方法:
采用了典型的 bootstrap + collapse + Flex
布局 实现收缩 和 响应式,如果你不知道的话我帮你搜了一遍文章: https://www.cnblogs.com/yangchaojie/p/8120549.html
5.主体 布局模块效果
6.主体在高度上通过 calc
计算,得出高度
7.采用 @media
媒体查询来在不同端变化高度,这是常用的做法,可以实现在不同的设备下,添加不同的样式,让布局改变,所以当然这个网站不止这一处采用了这个做法,如果你不知道媒体查询的法,我也帮你找了一些不错的相关文章
http://www.bubuko.com/infodetail-1045273.html
https://www.cnblogs.com/zhaodifont/p/3858657.html
https://www.cnblogs.com/xcxc/p/4531846.html
https://blog.csdn.net/u010510187/article/details/82790963
翻译不完全,但是介绍的很全,可以搭配上面的看
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries
8.如果你了解 bootstrap 那你一定知道 布局容器
9.头部采用了 row + col
,bootstap 栅格系统
,链接: https://v3.bootcss.com/css/#grid
10.使用了 bootstrap
的 栅格系统
来在不同设备屏幕下分成不同的分辨率
解析:
如果你知道 bootstrap 的栅格系统话, 你可能已经发现了,这个网站的做法。
我们知道 bootstrap 的是12栅格系统, 所以我来解析下这个网站分列做法。
col-12
没有加sm
这样的媒体查询前缀,则不管屏幕大小始终占满12个格子
也就是成了一行一列,因为 CSS
是拥有层叠特性
的,所以加了媒体查询前缀
的在bootstrap
下,优先级
是比不加的高的,样式会被加了前缀
的覆盖掉。
col-sm-6
则是 2列
,因为 12 / 6 = 2
所以一行只能占 2 个div 。
col-lg-4
则是 3列
, 因为 12 / 4 = 3
所以一行最终只能占 3 个div,也就是 3列
了。
以此类推 12除于
你的想要分的 列数
加上 不同的sm、lg、xl等屏幕尺寸参数,就可以实现,响应式了。
一遍写这个属性是从小屏幕写到大屏幕的,因为这样更合理更清晰,比如这个网站就是从 手机 > 平板 sm > 电脑 lg
如果你不了解的话bootstrap
的话,可以看官方文档非常的简单,上手很快,需要你了解一点 html
、css
的知识,因为他本质上bootstrap还是 CSS
的样式,简单点就是别人写好的 css 样式,你拿来直接用,但你要起来了解一点,才知道怎么使用。
bootstrap中文文档:https://v3.bootcss.com/css/#grid
bootstrap英文文档:https://getbootstrap.com/
另外个人觉得英文文档比 中文 文档新,现在 英文 文档是bootstrapV4版本,中文 文档还是V3,如果你是从没接触过 bootstrap 那我建议你直接看中文文档,为什么呢?因为 英文 文档是比较新的版本,但本质上基础内容和 中文 文档没有什么太大区别,所以不用太担心,文档过时的问题.
好了,大概的解析了一下这个网站,当然这个网站不只是简单的使用了 bootstrap 他加上了自已写的不少样式,所以实际开发 不单单是依靠一个 bootstrap的,他只是一个基石,我们只是踩在上面。
最后附上CSS 手册一本: http://css.doyoe.com/