说明：活动专题：专题需要有后端数据对接调用数据展示、抽奖、登录等交互。示例：svn://gitee.com/amswait/cyou/source/demo/activity-ui 静态专题：专题纯做展示，后面不需要进一步与后端开发交互调用。示例：svn://gitee.com/amswait/cyou/source/demo/event.changyou.com注：如果只有pc端，设置viewport在m端也能正常访问，布局不会错乱。 <meta name="viewport" content="width=1500,minimum-scale=0,maximum-scale=5,user-scalable=yes"/> 官网：游戏官网项目，一般是静态网站，没有后端开发交互，偶尔有个可以跨域的预约功能。示例：svn://gitee.com/amswait/cyou/source/demo/ldjsy注:svn检出需要用gitee帐号，可以根据需要自动检出对应项目目录汇总目录：https://gitee.com/amswait/cyou/tree/master/source/demo include 方式引用碎片一般可以用nginx服务器、apache服务等 <!--#include virtual="/inc/dma.html"--> 移动端必须加此样式，防止浏览器自动调整字体影响布局-webkit-text-size-adjust: none; 通用规则一般禁止使用字体文件(ttf/eof/svg/eot)(如需使用请联系需求方和技术同学确认) 检查专题文件包大小，如果超过10M看下专题是否包含了视频、mp3等大文件。 一般mp4、mp3文件有我们技术同学上传后反馈地址进行调用或者使用搜狐h5播放方式，mp3压缩品质一般64k; 视频：mp4一般按720p品质电影压缩 1.（大小M/时长s）<1M/s，保证清晰度情况下尽量压缩 2.一般视频宽度640px小于1024px 3.一般mp4格式 h264编码 一般单张图片不超过300k,png图片必须压缩(https://tinypng.com/),jpg图片一般60品质，如果要求清晰度高可以调高些。 pc端页面header需要引入 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 活动或者专题images文件中小图icon，尽量合成一张图减少请求。无用的图片及时删除，交包前务必将图片压缩一遍，特别是弹框、首页、分享页的背景图。 活动css文件为减小资源最终格式化为横向排列。 选择器 { display:none; background-color: #474747; border: 10px solid #474747; height: 390px; width: 640px;} 统计代码引入方式： 官网： <!--#include virtual="/inc/dma.html"--> 活动： <!--#include virtual="/all/dma/dma_activity.html"--> 专题：<!--#include virtual="/all/dma/dma_static.html"--> 图片压缩：https://tinypng.com/{:target=”_blank”} 专题、活动中pc端和m端互跳(双端同时存在)// pc端跳转m端 (function () { if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) { var a = document.referrer, b = { "baidu.com": "seo_baidu", "sogou.com": "seo_sogou", "sm.cn": "seo_sm", "so.com": "seo_360", "bing.com": "seo_bing", "google.com": "seo_google" }, c; for (c in b) { if (-1 != a.indexOf(c)) { a = b[c]; if (window.sessionStorage) { sessionStorage.setItem("channel", a) } else { var d = d || 0, b = ""; 0 != d && (b = new Date, b.setTime(b.getTime() + 1000 * d), b = "; expires=" + b.toGMTString()); document.cookie = "channel=" + escape(a) + b + "; path=/" } break } } window.location.href = "../m/index.shtml" + location.search }; })(); // m端跳转pc端 if (! /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { window.location.href = "../pc/index.shtml"; }

移动端页面兼容要求兼容微信、手Q、UC浏览器，如果是游戏APP内置页面，必须兼容游戏对应的MSDK浏览器。 兼容安卓4.4及以上、iOS最新版本，页面能正常预览，无错位。 检查视频、音频是否正常播放；涉及自动播放的视频H5，推荐使用移动端视频组件 页面不需要强制横/竖屏时，可根据实际需求，在屏幕旋转时候给予提示 移动端必须加此样式，防止浏览器自动调整字体影响布局 -webkit-text-size-adjust: none; px布局设计稿是640就填640、750设计稿就填750,正常按实际像素px布局即可。 <meta name="viewport" content="width=750,minimum-scale=0,maximum-scale=5,user-scalable=no"/> REM布局规范只列举了rem布局这一种适配方式，但不是说限制只能用这种布局方式。 无论用何种方式，需要保证在不同比例、不同尺寸的手机上，测试微信、手Q、safari、UC等主流浏览器无明显错位、变形。 不管你拿到的设计稿宽度是640px还是750px，多大都一样。和我们平时做PC页面的做法基本一样， 只需要把单位px换算成rem，所有设计稿的的元素大小全除以100单位换成rem， 例如设计稿上个某个文字的大小为30px，直接写font-size:0.3rem。 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <script> //屏幕适应 (function (win, doc) { if (!win.addEventListener) return; var html = document.documentElement; function setFont() { var html = document.documentElement; var k = 750;//设计稿是640就填640、750设计稿就填750 html.style.fontSize = html.clientWidth / k * 100 + "px"; } setFont(); setTimeout(function () { setFont(); }, 300); doc.addEventListener('DOMContentLoaded', setFont, false); win.addEventListener('resize', setFont, false); win.addEventListener('load', setFont, false); })(window, document); </script>

event.changyou.com 静态专题重构规范 点击查看通用规范

activity-ui活动专题整体架构及注意事项说明 点击查看通用规范

新版官网的架构是pc端与移动端的在同一目录下，移动端作为子文件夹存在，各个文件夹的作用请参考官网外包标准说明 官网目录结构例如《天龙怀旧版》官网tlhj.changyou.com pc官网目录tlhj.changyou.com/m 移动端官网目录

移动端页面布局使用px方式布局 viewport 方式适配 <meta name="viewport" content="width=750,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> 统计代码一般放碎片文件里面 通过include方式引入 <!--#include virtual="/inc/dma.html"--> pc端通调引入 <!--#include virtual="/inc/public_js_cyou.html" --> 其他参考目前官网 做之前尽量拿到原来官网结构做基础页面上进行制作或者换肤 全新制作官网，可以要一版其他类似官网源码做参考。 官网一般禁止使用字体文件(如需使用请联系需求方和技术同学确认) 制作中如遇到问题，随时沟通

官网整体架构及注意事项说明

PC官网使用说明 手机官网使用说明采取页面中引用碎片的方法。引用碎片前请引用zepto或jquery 1.端游、手游页面引入碎片 浅色：<!--#include virtual="/inc/cyou_public_js_white.html" --> 深色：<!--#include virtual="/inc/cyou_public_js_dark.html" -->

html文件示例 p { font-size: 24px; } hello world！ html文件会截取head，body内的部分插入页面，体验就像是iframe一样 alert('hello world！')

示例项目的部署方式复制项目到source目录下即可， 点击查看demo

由于flash播放器将于21年彻底被放弃，所以将原先使用搜狐视频flash版本播放器的官网等迭代至H5版本, 出于兼容性考虑，将播放策略调整为，在IE11以下浏览器调用flash播放器，其余使用H5版本，为方便使用，将调整后的播放策略与原有的使用方法进行二次封装整合。