前端|响应式开发之布局容器

欢迎点击「算法与编程之美」↑关注我们!

本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。

问题描述

在前面学习了响应式布局原理,简单的了解了一下响应式布局许多功能及其原理,今天来学习一下响应式布局中的布局容器。

解决方案

响应式布局和之前的开发布局有着很多不同的地方,在做响应式开发的时候会用的一个大的布局容器,在做响应式布局开发的时候会用到一个框架——Bootstarp前端开发框架。这个框架将需要的页面内容和栅格系统包裹一个.container容器,Bootstartp预先定义好了这个类,叫.container它提供了两个作此用处的类。使用的时候必须叫这个名字,因为bootstarp事先将这个类定义好了,所以必须叫做.container

首先看第一个叫做container类,这个container类就是响应式的布局容器,它的宽度是固定死的,就和在前面的响应式布局原理中看到的图片是一样的。

(1)大屏(>=1200px)宽度为1170px

(2)中屏(>=992px)宽度为970px

(3)小屏(>=768px)宽度为750px

(4)超小屏(100%)

所以在使用的时候只需要在Bootstarp页面中写入.container类,就再也不需要写媒体查询了,所以称这个类为预定义类,在Bootstarp中有很多这样的预定义类,只需要了解这个类怎么使用以及这个类实现了什么功能就可以了。在之前的响应式布局中还需要手动去写,在不同的尺寸下划分为不同的档位,在当然尺寸是可以随便划分的,但在Bootstarp是规定了这四个档位,就只用这四个就可以了。

图2.1 效果图

图2.2 效果图

图2.3 效果图

从上面的三张图中可以看到这几张图的大概效果。

还有一种布局是container-fluid类,这种布局的特点是:

(1)流式布局容器百分百宽度

(2)占据全部视口(viewport)的容器

(3)适合于单独做移动端开发

图2.3 效果图

<!DOCTYPE html>

<html>

       <head>

              <meta  charset="utf-8" />

              <title></title>

              <link  rel="stylesheet" type="text/css"  href="bootstrtap/css/bootstrap.min.css"/>

       </head>

       <body>

              <div>

                     123

              </div>

              <div>

                     123

              </div>

       </body>

</html>

从上面的效果图中可以大致看出两种布局的区别,需要注意的是container类默认外边距为15px。

结语

从上面的两种布局来看,在做响应式开发的时候可以选择container类,如果单独做移动端的开发可以选择container-fluid类。

END

编  辑   |   王楠岚

责  编   |   桂   军

 where2go 团队


   

微信号:算法与编程之美          

长按识别二维码关注我们!

温馨提示:点击页面右下角“写留言”发表评论,期待您的参与!期待您的转发!

发布了723 篇原创文章 · 获赞 57 · 访问量 10万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览