html5教程《实用技巧》—让你的网站变成响应式几个步骤

W-design2017.08.07

一、基本绘画

在最基本的画图操作中，你需要的只是希望图像出现处的位置(x和y坐标)。图像的位置是相对于其左上角来判断的。使用这种方法，图像可以简单的以其原尺寸被画在画布上。

drawImage (image, x, y)

var ctx = canvas.getContext (’2d’);ctx.drawImage (myImage, 50, 50);

ctx.drawImage (myImage, 125, 125);

ctx.drawImage (myImage, 210, 210);

缩放及调整尺寸

改变图像的尺寸，你需要使用重载的 drawImage 函数，提供给它希望的宽度和高度参数。

drawImage (image, x, y, width, border=1 Height)

var ctx = canvas.getContext (’2d’);ctx.drawImage (myImage, 50, 50, 100, 100);

ctx.drawImage (myImage, 125, 125, 200, 50);

ctx.drawImage (myImage, 210, 210, 500, 500);

这个例子演示了如何画一个比原图小的图像，一个不同长宽比的图像和一个比原图大的图像的方法。

二、媒体

一个响应式的布局是实现响应网站的第一步。现在，让我们把注意力集中在另外一个现代化网站非常重要的方面：媒体，如视频或图像。 下面的CSS代码将确保您的图像将永远不会大于他们的父容器，代码非常简单，适用于大多数网站。请注意，IE6 等旧的浏览器不支持 max-width 指令。

1. img {max-width: 100%; }

虽然上述技术是有效的，有时你可能需要有更多的图像控制权，例如根据客户端的显示大小，显示不同的图像。

这是由 Nicolas Gallagher 发明的好方法。让我们看看 HTML：

1.

正如你可以看到，我们使用 data-* 属性来存储替换图像的 URL。现在，让我们使用强大的CSS3来为匹配 min-device-width 条件的媒体指定替换图像：

1. @media (min-device-width:600px) {

2. img[data-src-600px] {

3.content: attr(data-src-600px, url);

4. }

5. }

6.

7. @media (min-device-width:800px) {

8. img[data-src-800px] {

9.content: attr(data-src-800px, url);

10. }

11. }

三、设备访问

对于消除Web应用与原生的应用，最大的障碍就是浏览器需要访问移动设备基本特性的能力，比如说照相机，通讯录，日历，加速器等，利用HTML5技术可以实现此能力方面，Mozilla一直在努力通过移动浏览器Fennec来将强设备访问能力。

对于许多的移动开发商而言，能够提高设备访问能力是HTML5最令人沸腾的时代性的革新，这完全的意味着Web应用能够登陆移动设备，而无需再做任何的PhoneGap式打包。一般游戏开发商当然是最开心，因为某些性能特性对他们来说是封锁的，比如能整合到游戏中的加速器。

四、离线缓存

相对而言，离线缓存算是一个比较新的概念，简单来说就是在离线的情况下，web应用还可以正常的进行运行。传统意义上的web技术应用需要依赖于网络，而HTML5的离线缓存可以冲破这个束缚，利用离线缓存技术，这样才可以在离线状态下正常使用web应用。目前已经有产品实现了这个方式。比如亚马逊Kindle的云阅读器。

原文链接：

上一篇：你知道百度与中信要合资建立直销银行，但你知道什么是“直销银行”吗？

下一篇：【实用技巧】电脑卡到不行？教你简单三步清理C盘！