分类： 重构制作规范

rem适配

设置viewport：

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">



初始字号：在css中设置html根字体大小，如：

html{font-size: 13.3333vw} //采用Rem布局，当前值以750px设计稿为基础


750px设计稿：font-size值为13.33333vw
1080px设计稿：则font-size值为9.259259vw


单位转换：在css中html里设置好根字体大小后，只需将所有设计稿的的元素大小全除以100即可换成rem单位，如：

.my-invite-box{
	width: 7.13rem;  //713px
	height: 3.56rem; //356px
	margin-left: -3.565rem;  //-356.5px
}

温馨提示：rem是一种适配方式，但并不仅限于rem方式。无论用何种方式，需要保证在不同比例、不同尺寸的上级上，测试微信、手Q、safari、UC等主流浏览器无明显错误、变形。

H5视频参数

格式：mp4

编码：H.264（AVC>）

编码工具：x264

码率：950≤x≤1350kbps

帧率：推荐24fps

编码配置：main

编码等级：4.1

编码方式：平均码率+二次码率

音频格式：AAC

音频码率：≤128kbps

音频采样率：44.4kHz

字体设置

PC端：通常使用微软雅黑作为中文字体进行设计

H5端：因IOS、Android等系统差异，建议使用移动端系统默认字体进行设置

特殊字体：如需求中有特殊字体或者图标，则使用Web字体进行设置。请使用字蛛+进行字体提取压缩

PV统计

需要在页面底部添加PTT统计代码，如：

<script src="//ossweb-img.qq.com/images/js/PTT/ping_tcss_tgideas_https_min.js"></script>
<script>
//此段代码不能放到外链JS中，
var setSite={ //设置网站属性 
    siteType:"a20160711xxx", //必填项:"os"代表是官网，如果不是，则填写actName例如a20160701xxx
    pageType:"index", //必填项:本页面的定位；按照页面含义填写例如main||list||detail||download||share||page1||pageN,不支持点(.)、下划线(_)
    pageName:"首页", //必填项:页面中文名 
    project:"other", //选填项:如果是官网模块则是必填;按照模块内容，填写固定的对应值;官网微社区base;同人站doujin;赛事match;故事站story;文化站history;粉丝站fans;爆料站coming;论坛bbs;皮肤skin;默认other;
    osact:0 //选填项:默认是0。osact=0表示非官网专题；osact=pc表示pc官网/pc官网专题；osact=m表示移动官网/移动官网专题；osact=ingame表示微社区/微社区专题
};
if(typeof(pgvMain)=='function')pgvMain();//千万不能忘记！
</script>

曝光埋点

用来统计官网的模块的曝光量和模块点击：

PC端和H5端用法一样；在官网模块dom结构上添加 exposure-tag=”英文名，中文解释” 属性及值，如：

<div class="news" exposure-tag="英文名,中文解释"></div>
<!-- 例如： -->
<div class="news" exposure-tag="news,新闻"></div>

按钮上报

PC端：

<!-- 开始游戏 -->
<a href="#" onclick="PTTSendClick('btn','start','开始游戏');">开始游戏</a>
<!-- 分享给朋友 -->
<a href="#" onclick="PTTSendClick('btn','share','分享');">分享给朋友</a>
<!-- 预约-->
<a href="#" onclick="PTTSendClick('btn','order','预约');">预约</a>
<!-- 下载游戏 -->
<a href="#" onclick="PTTSendClick('btn','download','下载游戏');">下载游戏</a>
<!-- 视频播放 -->
<a href="#" onclick="PTTSendClick('btn','playvideo','播放视频');">播放视频</a>

H5端：

<a href="javascript:;" id="btnStart">开始游戏</a>
<script src="//ossweb-img.qq.com/images/js/mobile_build/util/zepto.js"></script>
<script>
    $("#btnStart").tap(function(){
        PTTSendClick('btn','start','开始游戏');
    });
</script>

专题创建

专题命名：专题文件夹的命名为：a+年月日+专题英文或拼音小写简写，如：a20200320lol

文件命名：html首页文件必须命名为”index”，文件名禁止特殊字符。统一使用英文小写

通用头尾部：公共头部组件JS，

<script src=”//cdn.tgp.qq.com/wegame/header/js/init.js”>


公共尾部组件JS，

<script src=”//game.gtimg.cn/images/js/2018foot/foot.js”>



Meta使用：统一使用运营活动Meta，注意区分PC和H5端，如：

<meta charset="gbk" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="robots" content="all">
<meta name="author" content="Tencent-CP" />
<meta name="Copyright" content="Tencent" />
<meta name="Description" content="页面的描述内容" />
<meta name="Keywords" content="页面关键字" />

Html协议

http协议：引用http或https地址时，需要补全http协议信息，如：

<style>
//CSS背景图片 
.bg{background: url(//game.gtimg.cn/images/cf/cp/a20161021sqjs/hd.jpg) no-repeat;}
</style>
//链接URL
<a href="//cf.qq.com/main.shtml">进入官网</a>
//图片SRC
<img src="//game.gtimg.cn/images/cf/web201610/logo.png">
//JS链接
<script src="//ossweb-img.qq.com/images/js/title.js"></script>

TDK

页面标题：页面名称-产品中文全称-WeGame，如：

<title>WeGame游戏商店 - 发现更大的游戏世界</title>



页面关键字：为产品名、专题名、专题相关名，之间用英文半角逗号隔开，如：

<meta name="keywords" content="WeGame,游戏商店,WeGame平台,游戏发行,游戏平台,游戏评测,单机游戏,游戏购买,游戏下载,腾讯游戏平台,游戏助手,游戏加速,LOL助手,LOL官方盒子,CF助手,DNF助手,免费网络加速">



页面描述：不超过120字，描述内容要和页面内容相关，如：

<meta name="description" content="WeGame游戏商店，致力于发现全球好游戏，提供游戏资讯、购买、下载、助手、直播和社区等一站式游戏服务，满足优质汉化、社交互动、稳定国服等更贴心的本地化需求，同时连接全球开发者与游戏玩家，构筑玩家与开发者的沟通桥梁。">


CSS

样式命名：使用标准、通用的英文单词进行命名，全部使用小写，遵循BEM规则，如：

.wrap{}                    //外层容器
.mod-box{}                 //模块容器
.btn-start{}               //开始按钮
.btn-download-ios          //IOS下载按钮
.btn-download-andriod      //安卓下载按钮
.btn-head-nav1             //头部导航链接按钮
.btn-news-more             //更多新闻按钮
.btn-play                  //播放视频按钮
.side-nav{}                //侧栏导航

选择器层级：禁止使用层级过深的选择器，最多3级，如：

正确示范：

.hot-game .hot-game-user-name{}

错误示范：

.page-lol .hot-game .hot-game-hd .hot-game-user-box .hot-game-user-name{}



使用Class进行定义：除非有特定的功能、组件要求等，禁止使用id来定义元素样式

禁止对纯元素选择器设置特定样式：错误示范：

a{background: url("xxx");}