360 AI音箱官网开发手记
标题说的是官网，但实际上本文主要介绍的是展示大图的页面，也就是概述页。为简便起见，本文以下用“官网”代称“360 AI音箱官网概述页”。
这次官网的设计稿是提前4天才开始出的，最后一个页面是上线前一天下午2点给的。总之，时间非常紧，没有充裕的时间去调研多种实现方案。开发中采用了比较保守、兼容性好的技术。
基本数据
说到大图，就得知道主流显示器的分辨率。京东在销显示器的分辨率如下：
- 3840×2160
- 3840×1080
- 3440×1440
- 2560×1440
- 2560×1080
- 1920×1200
- 1920×1080
维基百科2019年1月调查结果如下（https://p4.ssl.qhimg.com/t01fff3464ffc757200.png）：
| 标准 | 比例 | 宽度(px) | 高度(px) | 用户(%) |
|---|---|---|---|---|
| nHD | 16:9 | 640 | 360 | 4.26 |
| SVGA | 4:3 | 800 | 600 | 0.42 |
| XGA | 4:3 | 1024 | 768 | 3.29 |
| WXGA | 16:9 | 1280 | 720 | 3.15 |
| WXGA | 16:10 | 1280 | 800 | 3.88 |
| SXGA | 5:4 | 1280 | 1024 | 3.37 |
| HD | ~16:9 | 1360 | 768 | 1.65 |
| HD | ~16:9 | 1366 | 768 | 24.27 |
| WXGA+ | 16:10 | 1440 | 900 | 6.55 |
| 非标 | 16:9 | 1536 | 864 | 5.5 |
| HD+ | 16:9 | 1600 | 900 | 4.81 |
| WSXGA+ | 16:10 | 1680 | 1050 | 2.52 |
| FHD | 16:9 | 1920 | 1080 | 19.20 |
| WUXGA | 16:10 | 1920 | 1200 | 1.20 |
| QWXGA | 16:9 | 2048 | 1152 | 0.46 |
| 非标 | 21:9 | 2560 | 1080 | n/a |
| QHD | 16:9 | 2560 | 1440 | 2.09 |
| 非 | 21:9 | 3440 | 1440 | n/a |
| 4K UHD | 16:9 | 3840 | 2160 | n/a |
也就是说，2560像素及以下宽度屏幕的用户占86%以上。为此，官网所有大图最大宽度为2560像素。
| 图片数 | 25 |
|---|---|
| 大图数 | 15 |
| 页面体积 | 6.8MB |
接下来，本文主要从以下几方面概述官网开发涉及的技术点：
- 呈现大图
- 弹性文字
- HTML结构
- CSS布局
- 自定义字体
- 固定页脚