使用 Gantry 架构的模板，你可以专门针对不同的浏览器，甚至是不同的操作系统去设计专门的样式表 ... 下面我们来演示一下 ...

先打开课程的资料包 xx-xx ... 把这里的两张图像放在模板目录下面 ...

gantry ... images ... logo .... 这两张图像是我专门针对 Google 的 Chrome 浏览器，还有 iPhone 设计的标志 ...

我想让网站在 Chrome 浏览器下，使用 chrome.png 这个图像作为网站的标志 ... 在 iPhone 下面，使用 iphone.png 这个图像作为标志 ..

打开 模板目录下面的 css 这个文件夹 ...

先随便复制一个样式表里 ... 然后使用特定的形式去命名这个样式表 ... gantry 架构会智能的加载这些样式表 ..

样式表的名称开始要用模板的名称 ... 这个模板是 gantry ... 然后是横线 ... 加上 custom ... 后面再加上一条横线 ... 最后是浏览器的名称 ...

输入 chrome ...

当用户使用 Chrome 浏览器访问我们的网站的时候 ... Gantry 架构会去加载这个 gantry-custom-chrome.css ...

打开这个样式表 ... 清空里面的内容 ...

回到前台 ... 鼠标放在标志的区域上 ... 右键 ... 审查元素 .. 复制一下设置标志背景的样式 ...

再回到我们的自定义样式表 ... 粘贴过来 ... 然后再修改一下 ... chrome 标志是在 images 下面的 logo 文件夹里 ... 图像的名称是 chrome.png ...

保存 ...

回到 Chrome 浏览器 ... 刷新 ...

你会看到 ... 页面上会使用 chrome.png 图像作为网站的标志 ... 因为当前我们使用的是 Chrome 浏览器 .. 所以 Gantry 架构会去加载为 Chrome 浏览器定制的样式表 ... 应用我们定义的样式 ...

我们可以再打开 Safari 浏览器试试 ...

页面仍然会使用原来的 Gantry 标志 ... 因为当前使用的浏览器是 Safari ...