上一篇博文介绍了MDL页面的布局。这篇博文主要介绍MDL页面中元素的布局。在MDL的设计中,根据设备的不同,会将页面的每一行划分成若干个列。具体来说,PC页面一行12列,平板一行8列,手机一行4列。MDL为这些列预定了边距(margin)。HTML页面中的每个元素都可以被定义成一个单元格类(mdl-cell)。每个单元格可以占用若干列。这些单元格按照从左到右,从上到下的顺序依次排列这些单元格。需要注意的是
- 如果当前行剩余的列数不足以放下当前的单元格时,该单元格会摆放在下一行。
- 如果一个单元格占用的列数比设备一行的总列数还多,那么让该单元格占用一整行。
由于不同设备每行的列数不同,因此可能造成同样的页面定义,在不同设备上的显示效果完全不同。
例如,假设有如下几个单元格:
单元格1: 5列
单元格2:2列
单元格3:2列
单元格4:3列
单元格5:3列
它在PC上显示效果为
单元格1 | 单元格2 | 单元格3 | 单元格4 | ||||||||
单元格5 |
它在平板上显示效果为
单元格1 | 单元格2 | ||||||
单元格3 | 单元格4 | 单元格5 |
它在手机上显示效果为
单元格1 | |||
单元格2 | 单元格3 | ||
单元格4 | |||
单元格5 |
接下来,通过简单的示例介绍如何通过网格布局页面。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Material Design Lite">
<title>MDL 示例</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="static/css/material.min.css">
<script src="static/js/material.min.js"></script>
<style>
.gray-box{
background-color: #dfdfdf;
}
</style>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">MDL 样例</span>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">MDL 教程</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link">概述</a>
<a class="mdl-navigation__link">布局</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--5-col gray-box">单元格1</div>
<div class="mdl-cell mdl-cell--2-col gray-box">单元格2</div>
<div class="mdl-cell mdl-cell--2-col gray-box">单元格3</div>
<div class="mdl-cell mdl-cell--3-col gray-box">单元格4</div>
<div class="mdl-cell mdl-cell--3-col gray-box">单元格5</div>
</div>
</main>
</div>
</body>
</html>
代码第42-48行通过网格定义了一组div元素的布局。
首先,所有的单元格(mdl-cell)都必须在网格容器(mdl-grid)之内。
第二,一个单元格通常需要定义两个css类。一个是mdl-cell类,它指定当前元素是一个单元格。一个是mdl-cell--N-col类,这里N=1到12。它指定单元格所占的列数。
上面代码的运行效果如下图。