移动网页设计与开发

2017-12-20 张子阳 推荐:

这本书介绍了很多前沿的Html5相关知识，这些知识又是相对比较重要的。

先讲了HTML5的概念和HTML5新出现的结构元素，例如nav、section、article等。

然后讲了css3媒体查询，以及PC浏览器和手机浏览器显示的不同、如何去进行自适应。

将css像素称为虚拟像素，将设备的实际像素称为物理像素。在PC浏览器上，这两个的比例是1:1。到了移动设备上，如果仍然按照1:1来显示，字体就会变得异常小。因此，在移动设备上，这个比例发生了变化，在当前常见的手机上，这个比例是：1:2。即1个css像素对应2个物理像素。

当图片的尺寸为600px时，如果比例是1:2，则实际显示在手机上，则变为了300px的css像素。

例子：手机和pc浏览器下图片的不同显示

Chrome浏览器还增加了一个picture元素，可以根据这个比例值来切换图片显示。可惜的是，除了Chrome，大部分浏览器都不支持。

作者又花了一章来讲述CSS3的三种新的布局方式，column、grid、flex。其中当下流行的“瀑布流”，可以轻松地用column布局来实现。

例子：Column多栏布局

关于javascript的章节，作者并未提及太多，只提到了移动设备上的新事件，touchstart和touchend，以及将来可能会纳入规范的指针事件。

作者接着简要地讲述了 SVG、Canvas 图形相关的内容，新的表单元素和属性，多媒体（audio和video元素）以及未来的可能拓展，例如Web组件。

总得来说，这本书基本涵盖了Html5方面的新技术，虽然讲解都不算特别深入，但是简要地了解一下，等到工作中用到再深入研究，或许是最好的方式了。

感谢阅读，希望这篇文章能给你带来帮助！