张子阳的博客

首页 读书 技术 店铺 关于
张子阳的博客 首页 读书 技术 关于

移动网页设计与开发

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方面的新技术,虽然讲解都不算特别深入,但是简要地了解一下,等到工作中用到再深入研究,或许是最好的方式了。

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