页面准备

页面模板

创建基本的HTML页面，复制以下代码，建议根据自己的需求做相关的修改再使用，如关键字、书签、代码等。

    <!doctype html>
    <html lang="zh-CN">
    <head>
        <title>页面标题</title>
        <meta name="keywords" content="页面关键词" />
        <meta name="description" content="页面描述" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="renderer" content="webkit">
        <link rel="stylesheet" href="pintuer-2.0.min.css">
        <link rel="stylesheet" href="app.css">
        <script src="jquery.js"></script>
    </head>
    <body>
        <p>Hello, world.</p>
    </body>
    </html>
    <script src="pintuer-2.0.min.js"></script>
    <script src="app.js"></script>

浏览器设置

因浏览器众多，为尽可能统一显示效果，根据需要针对浏览设置head中的meta属性。

兼容Edge模式

为在IE家族中，支持html5和CSS3的浏览器，设置为Edge模式。

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

极速模式

为在IE内核（兼容模式）和webkit（极速模式）内容的浏览器，设置默为极速模式显示。

    <meta name="renderer" content="webkit">

禁止转码

通过搜索引擎访问网站时，有些站点会出现自动转码情况，使用以下meta可禁止转码。

    <meta http-equiv="Cache-Control" content="no-transform" />

移动设备优先

拼图前端框架针对移动设备做了友好开发，使项目在移动设备上有良好的表现，及优秀的用户体验。为了确保适当的绘制和触屏缩放，需要在之中添加viewport元数据标签。

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

在移动设备浏览器上，通过为viewportmeta标签添加user-scalable=no可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

忽略识别电话号码

    <meta content="telephone=no" name="format-detection">

忽略识别邮箱地址

    <meta content="email=no" name="format-detection">

禁用响应式

为适应更多终端，框架默认使用响应式布局，即根据不同终端使用不同的排版方式，当然在具体的需求也，也可以根据需要采用非响应式布局，这情况下，在所有设备上显示的页面大小相同，方法为：

网格系统采用常规布局的方式。
不使用响应式相关的类。
在css文件中，查找/*auto*/，将之后的代码注释或删除。

修改颜色

框架提供了定义css参数版本，可根据需要修改相关的颜色、圆角及相关参数，其中建议修改的颜色为：

打开pintuer-2.0.custom.css或pintuer-2.0.custom.min.css文件，在文件root为相关参数设置，修改以下参数：
--color-main主色
--color-sub辅色
--color-dot点缀色

其余参数根据自主需要定义。