栅格化系统的原理以及实现
什么是栅格化
在一个有限的、固定的平面上,用水平线和垂直线(虚拟的线,“参考线”),将平面划分成有规律的一系列“格子”(虚拟的格子),并依托这些格子、或以格子的边线为基准线,来进行有规律的版面布局。
通俗点来说,就是人为的把网页中的一行,等比例划分,比如将一行划分为 12 等分。然后在每个格子里进行页面开发,这就栅格化。
原理
假如在页面里定义了一个 DIV,并设置如下 CSS 属性:
div {
border: 1px solid #ddd;
height: 200px;
width: 100%;
}
页面上将会展示一个带有灰色边框的,宽度 100% 的矩形。如果手动控制浏览器放大缩小,此 DIV 也会相应的放大缩小,但宽度始终是 100%。
如果在页面定义了两个 DIV,并设置如下 CSS 属性:
body {
font-size: 0; // 将inline-block布局两个DIV之间的距离清除
}
div {
height: 200px;
border: 1px solid #ddd;
width: 50%;
display: inline-block;
box-sizing: border-box;
vertical-align: top; // 顶部对齐
}
页面上将会有两个宽度各占 50% 的 DIV,如果页面放大或缩小,这两个 DIV 都会始终保持着页面 50% 的宽度。
相信到这里,应该有人看出来了,这就是栅格化,只不过第一个例子是将一行划分为 1 等分,即只有一个格子。 第二个例子将一行划分为 2 等分,即有两个格子。如果我将一行划分为 12 等分,那就跟 bootstrap 中的栅格化系统一模一样了,有 12 个格子。
实现
让我们来亲自实现一个栅格化系统,假设我们要将一行划分为 12 等分,那 1 等分就占有 100% / 12 = 8.33%
的宽度。
相应的 CSS 可以这样设置:
.col1 {width: 8.33%}
.col2 {width: 16.66%}
.col3 {width: 25%}
.col4 {width: 33.33%}
.col5 {width: 41.66%}
.col6 {width: 50%}
.col7 {width: 58.33%}
.col8 {width: 66.66%}
.col9 {width: 75%}
.col10 {width: 83.33%}
.col11 {width: 91.66%}
.col12 {width: 100%}
上一个完整的示例来看看吧:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.app {
font-size: 0;
}
.app div {
box-sizing: border-box;
border: 1px solid red;
height: 200px;
display: inline-block;
vertical-align: top;
}
.col1 {width: 8.33%}
.col2 {width: 16.66%}
.col3 {width: 25%}
.col4 {width: 33.33%}
.col5 {width: 41.66%}
.col6 {width: 50%}
.col7 {width: 58.33%}
.col8 {width: 66.66%}
.col9 {width: 75%}
.col10 {width: 83.33%}
.col11 {width: 91.66%}
.col12 {width: 100%}
</style>
</head>
<body>
<div class="app">
<!-- 4个div 占满一行 -->
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
<div class="col6"></div>
</div>
</script>
</body>
</html>
最后呈现出来的效果是这样的。
怎么样?是不是很简单。
进阶
结合 @media
媒体查询,我们可以做得更多。@media 详情请看MDN
相信用过 bootstrap 栅格化系统的都知道,在 bootstrap 栅格化系统中,有一些 col-md
col-sm
属性,它们是干什么用的呢?
其实,它们都是栅格化系统的 CSS 类名,只是针对了不同的屏幕宽度。
假如我们有这样的一个需求: 在 PC 上,因为屏幕比较大,我们要求一行显示 4 列的内容。但是在手机上,因为屏幕比较小,要求一行显示 3 列的内容。 即一个网站同时适配 PC 和手机端,根据不同的端自动调整页面。
此时,我们可以这样做:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.app {
font-size: 0;
}
.app div {
box-sizing: border-box;
border: 1px solid red;
height: 200px;
display: inline-block;
vertical-align: top;
}
/* 针对屏幕分辨率大于等于1200的 */
@media (min-width: 1200px) {
.col-md1 {width: 8.33%}
.col-md2 {width: 16.66%}
.col-md3 {width: 25%}
.col-md4 {width: 33.33%}
.col-md5 {width: 41.66%}
.col-md6 {width: 50%}
.col-md7 {width: 58.33%}
.col-md8 {width: 66.66%}
.col-md9 {width: 75%}
.col-md10 {width: 83.33%}
.col-md11 {width: 91.66%}
.col-md12 {width: 100%}
}
/* 针对屏幕分辨率小于1200的 */
@media (max-width: 1199px) {
.col-sm1 {width: 8.33%}
.col-sm2 {width: 16.66%}
.col-sm3 {width: 25%}
.col-sm4 {width: 33.33%}
.col-sm5 {width: 41.66%}
.col-sm6 {width: 50%}
.col-sm7 {width: 58.33%}
.col-sm8 {width: 66.66%}
.col-sm9 {width: 75%}
.col-sm10 {width: 83.33%}
.col-sm11 {width: 91.66%}
.col-sm12 {width: 100%}
}
</style>
</head>
<body>
<div class="app">
<div class="col-md3 col-sm4"></div>
<div class="col-md3 col-sm4"></div>
<div class="col-md3 col-sm4"></div>
<div class="col-md3 col-sm4"></div>
</div>
</script>
</body>
</html>
一个 DIV,同时设置两个类名。当屏幕 >=1200px
时,一行显示 4 列,当屏幕 <1200px
时,一行显示3列,而且是浏览器自动调整。
一个栅格化系统就这样实现了。
练习任务
对于栅格化的介绍就到此结束了,但如果你看完文章后什么都不做,不到一周,就会把学到的知识忘得七七八八,为了帮助你巩固知识,特地布置了一个小任务,按要求实现如下页面:
图一
图二
任务要求:
- 当页面大于
768px
时,页面如图1所示。 - 当页面小于等于
768px
时, 页面如图2所示。
这里是答案和在线DEMO,但是最好先试试能不能自己做出来,如果实在做不出来,再看答案。
- Nodejs学习笔记(三)——一张图看懂Nodejs建站
- 不规则图形的碰撞检测
- 自学WP7第一个例子:时钟
- 教您最简单粗暴的MATLAB入门级爬虫2
- 前台JS(Jquery)调用后台方法 无刷新级联菜单示例
- 项目中对图片的缩放和水印效果
- 照虎画猫写自己的Spring——自定义注解
- 数据分析进阶课程笔记(六)
- 微信发布重磅更新!上线小游戏,小程序间可快速切换
- 鼠标点击层以外的地方层隐藏
- WCF后续之旅(11): 关于并发、回调的线程关联性(Thread Affinity)
- WCF后续之旅(11): 关于并发、回调的线程关联性(Thread Affinity)
- 解决文本框在updatepanel中得到焦点,输入法不能切换到中文的问题
- 得到真实外网IP、IP所在国家、省份、地区
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- django 多数据库及分库实现方式
- Python气泡提示与标签的实现
- Django之choices选项和富文本编辑器的使用详解
- Android使用RSA加密和解密的示例代码
- Android布局之帧布局FrameLayout详解
- Okhttp3实现爬取验证码及获取Cookie的示例
- Android监听系统来电并弹出提示窗口
- 你该知道的Gradle配置知识总结
- Android布局之绝对布局AbsoluteLayout详解
- django实现模型字段动态choice的操作
- 详解ASP.NET Core 处理 404 Not Found
- Python AutoCAD 系统设置的实现方法
- Python如何操作office实现自动化及win32com.client的运用
- android Palette调色板使用详解
- python 穷举指定长度的密码例子