基础规范集合
畅游 |
内部文档整理 前端制作规范 |
---|---|
西山居 |
微信小程序接口文档 内部文档整理 前端制作规范 CDN-内部整理文档 验收标准 外包前端合作细则 |
网易 |
说明文档:\\192.168.10.65\技术部\重构规范文档整理\2021年\网易 ssh key权限添加 GIT拉取 项目测试环境发布 |
字节跳动 |
game-tool-cli使用说明 前端开发指南 |
腾讯互娱 |
通用适配 前端制作规范 canvas生成图片 PUBGM规范 英雄联盟 单机 手Q主题配置文档 手Q在线编辑器 CF登录、导航 CF内嵌页(PSD宽:1240px,头图高度请控制在593px以内) 心悦俱乐部(普通版) 心悦俱乐部(模板专题) 各类直播平台 业务线特殊规范 |
meta标签
单位- rem:
单位- px:
设置webview字体大小不受系统修改而改变
重置input\select样式
滚动条 样式设置
常用小组件
前端组件PC相互跳转
H5里跳转到PC
if(! /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
window.location = "http://csquansu.com/";
}
判断微信、手Q
if(! /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
window.location = "http://csquansu.com/";
}
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 非微信')
} }
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适配
字号自适应
@media改变父级字号,整个文档的大小跟着改变,把px单位换算成em,成为弹性大小。
或者使用rem相对单位,@media修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。
文本字体大小14px、16px,标题18px或以上,不需要针对不同分辨率做不同配置,手机或者平板上查看文章14、16号字就很舒服了,过大的文字反而显得更突兀。
Tips:字号一般不需要自适应
或者使用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:内容与背景分离,修饰性背景图片可使用本方法。内容相对背景定位有严格要求的不推荐。

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;}}
@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 */
@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 */