LOL前端重构规范

# 范例代码包下载&说明

提示

提供一些常用的示例代码包，注意根据实际项目修改以下内容：

  • 页面头部meta标签中的描述、关键字，如不清楚，找对应的产品或内部重构同学确认
  • 页面文件、样式文件及脚本文件中的资源分离路径 查看分离路径规范
  • PTT统计setSite中的相关信息 查看setSite设置
  • 移动端页面需调整分享信息，如不清楚，找对应的产品或内部重构同学确认

# PC单端专题

适用于PC单端的活动专题

目录结构示例：

 a20190509msihero //活动目录
   ├─ ossweb-img //存放图片、视频、音频等资源
      ├─ bg.jpg
      ├─ hreo.mp3
      └─ ...
   ├─ css //存放样式资源
      ├─ index.css
      └─ ...
   ├─ js //存放脚本资源
      ├─ index.js
      └─ ...
   └─ index.html //页面文件

【范例代码包下载】

# 移动单端专题

目录结构示例：

 a20190509msihero //活动目录
   ├─ ossweb-img //存放图片、视频、音频等资源
      ├─ bg.jpg
      ├─ hreo.mp3
      └─ ...
   ├─ css //存放样式资源
      ├─ index.css
      └─ ...
   ├─ js //存放脚本资源
      ├─ index.js
      └─ ...
   └─ index.html //页面文件

以设计稿宽度750px为基准进行适配，举例两种适配方式：

# 双端专题

目录结构示例：

 a20190509msihero //活动目录
   ├─ ossweb-img //存放图片、视频、音频等资源
      ├─ bg.jpg
      ├─ hreo.mp3
      └─ ...
   ├─ css //存放样式资源
      ├─ index.css
      └─ ...
   ├─ js //存放脚本资源
      ├─ index.js
      └─ ...
   ├─ m
      └─ index.html //移动端页面文件
   └─ index.html //PC端页面文件

移动端的页面文件放在/m目录下，并且在双端页面头部添加互跳的js判断，可参考： 双端跳转示例

# 双端适配专题

目录结构示例：

 a20190509msihero //活动目录
   ├─ ossweb-img //存放图片、视频、音频等资源
      ├─ bg.jpg
      ├─ hreo.mp3
      └─ ...
   ├─ css //存放样式资源
      ├─ index.css
      └─ ...
   ├─ js //存放脚本资源
      ├─ index.js
      └─ ...
   └─ index.html //PC端页面文件

适配方式可参考：双端适配说明

以设计稿宽度750px为基准进行适配，举例rem + 动态生成target-densitydpi值的适配方式（移动端）： 【范例代码包下载】

← 售卖专题 →