长沙全速

广几_全速（QQ：376023727）

基础规范集合

畅游 内部文档整理
前端制作规范
西山居 微信小程序接口文档
内部文档整理
前端制作规范
CDN-内部整理文档
验收标准
外包前端合作细则
网易 说明文档：\\192.168.10.65\技术部\重构规范文档整理\2021年\网易
ssh key权限添加
GIT拉取
项目测试环境发布
字节跳动 game-tool-cli使用说明
前端开发指南
腾讯互娱 通用适配
前端制作规范
canvas生成图片
PUBGM规范
英雄联盟
单机
手Q主题配置文档　手Q在线编辑器
CF登录、导航
CF内嵌页（PSD宽：1240px，头图高度请控制在593px以内）
心悦俱乐部（普通版）　心悦俱乐部（模板专题）
各类直播平台
业务线特殊规范

meta标签

单位- rem：<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"> <meta name="format-detection" content="telephone=no">
单位- px：<meta name="viewport" content="width=750,user-scalable=no,target-densitydpi=device-dpi"> <meta name="format-detection" content="telephone=no">

设置webview字体大小不受系统修改而改变

(function () { if (window.HiSpaceObject) { window.HiSpaceObject.setTextSizeNormal(); } })();

重置input\select样式

*{-webkit-appearance:none;-webkit-text-size-adjust:none;} select{-webkit-appearance:none} input::placeholder{color: #d1d4d8;}

滚动条 样式设置

.scroll::-webkit-scrollbar {width: .1rem;height: 1px;} .scroll::-webkit-scrollbar-thumb {border-radius: .1rem;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: #6f5536;} .scroll::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);border-radius: .1rem;background: #dac2a2;}

常用小组件

前端组件
PC相互跳转
H5里跳转到PC
if(! /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
window.location = "http://csquansu.com/";
}
判断微信、手Q
function is_weixn(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
alert('isWeiXin')
$('.weixin').show();
$('.qq').hide();
}else if(ua.indexOf('qq/')!= -1){
alert('isQQ')
}else{
alert('非QQ 非微信')
} }

PUBGM适配

(function (win, doc) { if (!win.addEventListener) return; function setFont() { var html = document.documentElement; var k = 1136, h = 640 ,cw = html.clientWidth, ch = html.clientHeight, z; html.style.fontSize = cw / k * 100 + "px"; if(cw/ ch >= k/h) { z = ch/h * k/cw; } else z = 1; $('.wrap-cont,.pop').css({ 'transform':'scale('+ z +')', '-webkit-transform':'scale('+ z +')' }); $('.page-bg').css({ 'background-size': 16* z +'rem auto' }); } setFont(); setTimeout(function () { setFont(); }, 300); doc.addEventListener('DOMContentLoaded', setFont, false); win.addEventListener('resize', setFont, false); win.addEventListener('load', setFont, false); })(window, document);

字号自适应

@media改变父级字号，整个文档的大小跟着改变，把px单位换算成em，成为弹性大小。
或者使用rem相对单位，@media修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
文本字体大小14px、16px，标题18px或以上，不需要针对不同分辨率做不同配置,手机或者平板上查看文章14、16号字就很舒服了，过大的文字反而显得更突兀。
Tips：字号一般不需要自适应
示例截图 示例截图

居中与背景平铺

安全内容范围内，上下左右居中。（position:absolute;left:50%;top:50%;margin:-(height/2)px 0 0 -(width/2)px;）
示例截图
background-size:cover（等比放大图片，背景覆盖全屏）
Tips：内容与背景分离，修饰性背景图片可使用本方法。内容相对背景定位有严格要求的不推荐。

@media媒体查询

@media(条件){……}
@media only screen and (width:414px){#wrap{zoom:1.104;}}
@media only screen and (width:320px){#wrap{zoom:0.853333333333333;}}
/* mobile adaptation start */
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */
.topbox{padding-top:50px;}
}
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */
.topbox{padding-top:70px;}
}
@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 */
.topbox{padding-top:100px;}
}
@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 Plus */
.topbox{padding-top:130px;}
}
/* mobile adaptation end */