1、Flex
- 项目 之前的布局 有点混乱， 使用 position / table / float 等
- 现在都更改为 flex 布局， 因为项目 主要是面向移动端用户， flex 有天生优势
- 更改思路
1、先写一个 公共的 css 放在 common.scss 中 2、全局写 css 时 引用这个common 的部分 3、当然 主要是 引用 flex 相关的部分 进行 布局 复制代码
- table 布局的 坏处在于 稍微 改动一点 会导致大面积 重新计算和布局 对性能 非常不利
- 也见到过一个页面 靠着 position 来支撑的 ， 导致一些 兼容性问题， 不同屏幕下 会导致很多问题
- 几个
场景展示 - common.scss
网络异常，图片无法展示
|
- 某个页面 使用 flex
网络异常，图片无法展示
|
2、SVG- icon
- 当前项目 所有图标
统一为 SVG之前 jpg / png 都存在 - 此处 对比简单说一下
网络异常，图片无法展示
|
- 实现思路参考
1、新建一个 svg 组件 Icon.js 2、该文件 维护所有项目中使用的 svg 复制代码
- 类似这样
网络异常，图片无法展示
|
- 项目中这样使用
网络异常，图片无法展示
|
3、预加载
网络异常，图片无法展示
|
- 此处 使用
网络异常，图片无法展示
|
网络异常，图片无法展示
|
网络异常，图片无法展示
|
- 对首屏加载有效
网络异常，图片无法展示
|
4、窗口加载
- 未在此项目中尝试
