[JavaScript知识库]前端代码规范，移动端，pc端css初始化

附上两个比较好的前端代码规范：

• 京东凹凸实验室前端代码规范.网址是：Aotu.io - 前端代码规范?,如果你们公司没有具体的前端代码规范，你完全可以自己按照这套规范来编写。里边包括了HTML规范、图片规范、CSS规范、命名规范和JS规范。

????????优点是清晰、简单、不复杂。近一年来，我工作中的代码都是安装这个标准来写的。

• 腾讯前端代码规范?网址是：TGideas文档库我经常看腾讯的前端博客，也阅读他们的开源项目。我认为腾讯的前端代码规范是优秀的。所以第二个推荐腾讯的代码规范文档库TGideas.

????????这是腾讯前端程序员的必读规范手册，优点是有PC端专题、移动端专题、双端专题。

????????这套文档，适合公司还没有代码规范，但正在建立代码规范的使用，你直接可以抄作业，让公司有一套不错的前端代码规范。

reset示例

PC端

字体设置

移动端IOS系统、安卓系统均支持.ttf格式的字体，WEB字体选择中建议引用.ttf格式字体；
定义web字体

@font-face {
    font-family: 'WebFontName';
    src: url('WebFontName.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
   }

.WebFontName {
     font-family: 'WebFontName'
   }

body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form,header,section,article,footer{margin:0;}
body,button,input,select,textarea{font:12px/1.5 tahoma,'\5FAE\8F6F\96C5\9ED1',sans-serif}
h1,h2,h3,h4,h5,h6{font-size:100%}
em,b{font-style:normal}
a{text-decoration:none} 
a:hover{text-decoration:underline}
img{border:0} 
body{padding-top:42px} 
button,input,select,textarea{font-size:100%;outline:none}
table{border-collapse:collapse;border-spacing:0}
td,th,ul,ol{padding:0}

移动端

字体设置

ios 系统默认字体
iOS 4.0+： 中文字体为 "华文黑体STHeiTi"、英文字体为 "Helvetica Neue"；

iOS 9+： Safari开始支持 -apple-system 参数， Chrome 使用 BlinkMacSystemFont ，兼容 iOS ／ MacOS

android 系统默认字体
原生Android下中文字体与英文字体都选择默认的无衬线字体。

4.0 之前版本英文字体原生 Android 使用的是 Droid Sans，中文字体原生 Android 会命中 Droid Sans Fallback

4.0 之后中英文字体都会使用原生 Android 新的 Roboto 字体

winphone 系统默认字体?默认中文字体是Dengxian(方正等线体)
默认英文和数字字体是Segoe

综上，各个手机系统有自己的默认字体，如无特殊需求，手机端无需定义中文字体，建议使用系统默认字体。如果需求包含特殊字体，可以使用CSS3?@font-face进行定义。

body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;
}

有较多文字的文章类页面：

/* 移动端常用reset.css (文字版本) */
/* reset */
html,body,div,p,ul,li,dl,dt,dd,em,i,span,a,img,input,h1,h2,h3,h4,h5 {margin:0;padding:0}
a,img,input {border:none;}
body{font: 14px/1.75 -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;}
a {text-decoration:none;}
ul,li{list-style: none}

如果页面无文字，或者不希望文字被长按选中，可使用下面的reset；适合于大多数专题页面?

/* 移动端常用reset.css (无文字版本) */
/* reset */
html,body,div,p,ul,li,dl,dt,dd,em,i,span,a,img,input,h1,h2,h3,h4,h5 {margin:0;padding:0}
a,img,input {border:none;}
body{font: 14px/1.75  -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;-webkit-tap-highlight-color: rgba(0,0,0,0);}
a {text-decoration:none;}
ul,li{list-style: none}
a, img {-webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */}
html, body {
    -webkit-user-select: none;   /* 禁止选中文本（如无文本选中需求，此为必选项） */
    user-select: none;
}

希望可以帮助到大家，

在此祝大家代码越写越漂亮。