使用 AMP 构建超快的移动页面

AMP (Accelerated Mobile Pages) 是 Google 的一个开源的项目,通过使用 AMP HTML,可以极其显著的提升网页加载速度。最近我在移动设备上使用 Google 的时候,发现很多网站都开始使用了 AMP。在从 Google 上进入一个 AMP 页面时速度更是异常的快,快到超乎想象——延迟几乎为零。本站也配置了 AMP,本文对 AMP 的一些特性进行一些分析,并介绍如何在 WordPress 上支持 AMP,并开发插件对其自定义。

继续阅读“使用 AMP 构建超快的移动页面”

使用 srcset + sizes 属性与 w 标识符解决一切响应式图片问题

使用 srcset 属性可以解决一切响应式图片问题,但这里分为两种情况,确定和不确定宽度的照片。相比之下,不确定宽度的照片更复杂些。

确定宽度的照片

此处指的确定宽度照片,是指样式属性宽度设置为一个确定了多少 px 的照片。

随着越来越多的高设备像素比(指 device pixel ratio,下同)显示器出现,网站需要更高像素的照片来适配这些显示器。

比如有一张照片显示宽度为 200px,它在 继续阅读“使用 srcset + sizes 属性与 w 标识符解决一切响应式图片问题”

移动优先 – 起源

现有的桌面上的操作系统大多都有浏览器,浏览器可以让我们方便的浏览一个网页。

然而最初的手机浏览器访问网页是很困难的,因为它们分辨率不高、屏幕很小而且浏览器不支持众多前沿的 CSS 以及 JavaScript,使它们没有能力访问桌面版网站。那时的手机访问的网站都是专门为设备大幅度简化的版本,就像这样:

不过,直到 iPhone 的发布,这一切都得到了很大的改变。因为 iPhone 上的浏览器 —— Safari 是一个真正的且非常前沿的 Web 浏览 继续阅读“移动优先 – 起源”