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布局
- 自定义字体
- 固定页脚