开发工具：Visual Studio Code及相关插件安装
Easy LESS 当保存.less文件时自动生成.css文件
Less IntelliSense .less文件的自动提示功能
Beautify css/sass/scss/less 样式文件格式化功能
Live HTML Previewer html预览功能
HTML Snippets html标签自动完成功能
JS-CSS-HTML Formatter html格式化功能
//自动适屏
//禁止 iOS 识别长串数字为电话
//不让安卓手机识别邮箱
//地址识别
//全屏模式
//顶部状态栏背景色
//设置缓存
//图标
//全屏模式
//强制竖屏
//强制横屏
//应用模式
//全屏模式
//强制竖屏
//强制横屏
//应用模式
常用布局方式:
1.流式布局+百分比 float:left , float:right center:100%;
一般手机端布局分为上(header)中(center)h和下(footer)三部分
常见布局:
header部分height:45px;width:100%;
position:fixed;
top:0;
left:0;
center部分:position:fixed
top:45px;
bottom:45px
footer部分:
bottom:0;
left:0;
2.弹性盒布局 display:flex;
任何一个容器都可以指定为Flex布局。
.box{display: flex;}
行内元素也可以使用Flex布局。
.box{ display: inline-flex;}
Webkit内核的浏览器，必须加上-webkit前缀。
.box{ display: -webkit-flex; /* Safari */
display: flex;}
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
3.rem 布局 font-size:1rem;
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=640){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
这是rem布局的核心代码，
这段代码的大意是：如果页面的宽度超过了640px，那么页面中html的font-size恒为100px，否则，页面中html的font-size的大小为： 100 * (当前页面宽度 / 640)
于是，问题来了，为什么要这样？别急，我先来一一回答
1. 为什么是640px？
对于手机屏幕来说，640px的页面宽度是一个安全的最大宽度，保证了移动端页面两边不会留白。注意这里的px是css逻辑像素，与设备的物理像素是有区别的。
如iPhone 5使用的是Retina视网膜屏幕，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel，所以设备像素数为640 x 1136px，而它的CSS逻辑像素数为320 x 568px。
如果要切移动端页面，你可以先把效果图宽度等比例缩放到640px，很好用。
2. 为什么要设置html的font-size？
rem就是根元素（即：html）的字体大小。html中的所有标签样式凡是涉及到尺寸的（如： height,width,padding,margin,font-size。甚至，left,top等）你都可以放心大胆的用rem作单位。
如果你把html的font-size设为20px，前面说过，rem就是html的字体大小，那么1rem = 20px。此时，此时宽60px，高40px的元素样式就这样设置如下 ↓
3. width: 3rem; height: 2rem;
那要是宽55px，高37px呢？然后经过换算，，设置如下 ↓
width: 2.75rem;
height: 1.85rem;
是不是发现这换算起来有点麻烦啊，，，（当然，你要是心算帝请无视）
如果我们一开始把html的font-size设为100px呢？此时1rem = 100px，那么上面的宽55px，高37px的元素样式就可以这么设置 ↓
width: 0.55rem;
height: 0.37rem;
是不是换算起来简单多了？！
4.百分比布局 width:50%;
百分比布局就是在项目中所有元素的宽高都不设置固定大小,而是用百分比来控制其大小
div{width:25%;heigt:20%;}
美工出图原则：
分辨率宽度：
320 480 640 960 1280 1600 1920 (web分辨率均为320[320*480])
360 720 1080 1440 1800 (web分辨率均为360[360*640])
因此有两套思路：
第一种是制作1920的psd图,然后导出320的jpg或bmp图。
其中的1920是320的6倍，然后高度，宽度百分比均从320上切取。
新建文档时1920*2880=(320*6)*(480*6);单位像素。
分辨率为432=(72*6);单位像素/英寸;
颜色模式：RGB颜色;
alt+ctrl+i 可调整图像大小及分辨率
第二种是制作1440的psd图,然后导出360的图。
其中1440是360的4倍，然后图片均从360上切取。
新建文档时1440是360的4倍，，然后高度，宽度百分比均从360上切取。
分辨率为288=(72*4);单位像素/英寸;
颜色模式：RGB颜色;
alt+ctrl+i 可调整图像大小及分辨率
第三种是制作宽度为320的图，并让其居中。所有的图片，大小，均按固定的来。
这样做的好处是兼容性强，且对前端的要求不高。
不过坏处是在某些分辨率下虽然布局不会乱，但看上去效果可能不太理想。
一般美工设计原则如下：
1.字体一般使用10px到16px,字体大小偶数,特殊情况下需要特小字体的也可选用8px字体。
因为在480px及720px屏上实际显示的字体大小为16px，并不会出现字体显示不清晰的问题;
2.颜色一般选择
对于黑白色，做为字体色及边框色时，仅能选择如下几种：
#ffffff;
#cccccc;
#999999;
#666666;
#333333;
#000000;
因为字体和边框只能使用web色,而web色仅有216种，其中以上6种为非彩色。
其它地方均可以采用真彩色(8+8+8=24位)，即2的24次方，1677万种颜色。
因此在设计某些颜色时，如果背景和某种字体颜色相同，但显示出的颜色却不一样。
是因为psd中字体的真彩色转换为html时被浏览器转换成了颜色值较少的web色。
3.尽量不要使用过渡色，使用平面设计
因为大量的过渡色，非常消耗手机的cpu，只有3d效果浏览器会用gpu(显卡)渲染。
也就是说，只所以手机采用平面化设计是因为手机性能的原因。
4.关于优化：
a.联通3g下载速度为338kb/s,因此一个UI图中所有图片的大小不能超过1mb.因此图片宽度不要超过640px
b.css3>svg>iconfont>webp>png8>gif>jpg
c.合并小图片，把固定大小的图标放入单一png中。
d.不要使用除微软件雅黑之外的非图片字体。
//盒子模型
┌────────────────────────────────────────────────┐
│ margin 15px │
│ ┌──────────────────────────────────────┐ │
│ │ border 1px │ │
│ │ ┌────────────────────────────┐ │ │
│ │ │ padding 4px │ │ │
│ │ │ ┌────────────────────┐ │ │ │
│10px│ 1px│4px│ 200px*40px │4px│ 1px│10px│
│ │ │ └────────────────────┘ │ │ │
│ │ │ 4px; │ │ │
│ │ └────────────────────────────┘ │ │
│ │ 1px │ │
│ └──────────────────────────────────────┘ │
│ 15px │
└────────────────────────────────────────────────┘
width:200px+4px*2+1px*2=200px+8px+2px=210px;
height:40px+4px*2+1px*2=40px+8px+2px=50px;
margin-top:15px;
margin-left:10/360*100%;
padding-left:4/360*100%;
border:1px;
width:210/360*100%;
光标bug:
input
height：20px;
padding-top:4px;
padding-bottom:4px;
font-size:12px;
height = padding-top + font-size + padding-bottom;
此时光标在任意浏览器下高度与字体高度相同
┌────────────────────────────┐0
│ padding-top:4px; │
│ 4 ┌────────────────────┐ 4 │4
│ p │ height:12px │ p │
│ x └────────────────────┘ x │16
│ padding-bottom:4px; │
└────────────────────────────┘20
其它细节重置：
letter-spacing: 0;
word-spacing: 0;
text-indent: 0;
text-shadow: none;
1.水平按百分比计算
2.垂直按像素计算
div
┌────────────────────────────┐0
│ padding-top:4px; │
│ 4 ┌────────────┐┌──────┐ 4 │4
│ p │ div1 ││ div2 │ p │
│ x └────────────┘└──────┘ x │16
│ padding-bottom:4px; │
└────────────────────────────┘20
0 4 div1 66 div2 96 100
div
{
width:100%;
height:20px;
padding-left:4/100*100%;
padding-right:4/100*100%;
padding-top:4px;
padding-bottom:4px;
}
div1{
width:(66-44)/100*100%;
height:20px;
}
div2
{
width:(96-66)/100*100%;
height:20px;
}
整体间距：10px,15px,20px
┌────────────────────────────┐0
│ padding-top:15px; │
│10 ┌────────────┐┌──────┐10 │4
│ p │ div1 ││ div2 │ p │
│ x └────────────┘└──────┘ x │16
│ padding-bottom:15px; │
└────────────────────────────┘20
整体内容边距
10px 2.7777%
字体padding
6px 1.6666%
10px 2.7777%
12px 3.3333%
15px 4.1666%
16px 4.4444%
20px 5.5555%
28px 7.7777%
30px 8.3333%
40px 1.1111%
60px 16.6666%
300px 83.3333%
320px 88.8888%
less下颜色命名：(web色)
@color-样式名-颜色名：颜色值;
@color-background：#f5f5f5;
@color-border: #cccccc;
@color-font-blue:#0099cc;
@color-font-black:#1b1b1b;
@color-font-gray-light:#999999;
@color-font-gray:#999999;
@color-font-orange:#ff9900;
常用边距：
//margin-组件名-位置
@margin-panel-top;
@margin-card-top;
@margin-list-top;
//组件名：panel,view,card,list
//方向，left,right,top,bottom
@padding-text-left;
//horizontal:水平
@padding-text-horizontal;
//垂直
@padding-text-vertical;
背景图大小
340*200
小图：386积分
70*30
标题高度：40px
小框：查看更多
80*25
图片大小
132*132
340*200
1.样式文件，防止加载编码出错。
@charset "UTF-8";
/* 移动端定义字体的代码 */
body{font-family:Helvetica;}
//竖屏时使用的样式
@media all and (orientation:portrait) {
.css{}
}
//横屏时使用的样式
@media all and (orientation:landscape) {
.css{}
}
//禁止文本缩放,当仅采用竖屏时才会遇到字体分辨率重新调整的问题。
html {
-webkit-text-size-adjust: 100%;
}
动画效果中，使用 translate 比使用定位性能高
//滚动中加入以下样式。
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
//更改输入框placeholder的颜色
input::input-placeholder{color:#1b9dc7;}
input::-webkit-input-placeholder{color:#1b9dc7;}
input::-o-input-placeholder{color:#1b9dc7;} 设置input里placeholder的字体颜色 属性
input::-ms-input-placeholder{color:#1b9dc7;}
input::-moz-input-placeholder{color:#1b9dc7;}
//关闭iOS键盘首字母自动大写
//去掉数字输入框的上下箭头
input[type=number] {-moz-appearance:textfield; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button
{-webkit-appearance: none; margin: 0; }
//android 上去掉语音输入按钮
input::-webkit-input-speech-button {display: none}
//ios和android下触摸元素时出现半透明灰色遮罩
E {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}
//消除transition闪屏
E {
/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-transform-style: preserve-3d;
/*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/
-webkit-backface-visibility: hidden;
}
//启用3D加速
E {
-webkit-transform:translate3d(0, 0, 0)
transform: translate3d(0, 0, 0);
}
//GPU加速
CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video来触发GPU渲染
//长时间按住页面出现闪退
E {
-webkit-touch-callout: none;
}
//手机拍照和上传图片
的accept 属性
输入框：
-webkit-appearance:none;//iphone下去掉边框阴影
-webkit-tap-highlight-color:transparent;//去掉高亮背景
-webkit-user-select: text;//显示输入的文字
一．文件命名规范
全局样式：global.css；
框架布局/布局，版面：layout.css；
字体样式：font.css；
链接样式：link.css；
打印样式：print.css；
主要的master.css
专栏columns.css
主题themes.css
……
二．常用类/ID命名规范
页 眉：header
内 容：content
容 器：container
页 脚：footer
版 权：copyright
导 航：menu
主导航：mainMenu / mainnav
子导航：subMenu / subnav
标 志：logo
标 语：banner
标 题：title
商 标：label
侧边栏：sidebar
图 标：Icon
注 释：note
搜 索：search
按 钮：btn
登 录：login
链 接：link
信息框：manage
外 套：wrap
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
标 语\广告：banner
菜单内容1：menu1 content
菜单容量：menu container
子菜单： submenu
边导航图标：sidebarIcon
注释： note
面包屑： breadcrumb(即页面所处位置导航提示）
容器： container
内容： content
搜索： search
登陆： Login
功能区： shop(如购物车，收银台)
当前的 current
NameName
name_name
1440 1080 720 480 360 320
搭建html开发平台（Visual Studio Code及相关插件安装.）
手机端浏览器分辨率市场调研
搭建SVN及测试服务器
安装less及指定使用方式。
UI基本尺寸确立
UI基本颜色及布局确定
动态效果设计
首页模板
测图软件MarkMan的使用
基本框架搭建
手机端测试
制定开发标准，以及自适应解决方案。
制定CSS样式命名方式。
苹果ID审请
域名购买及云服务器设计
带领团队，适应新的开发模式。
测试页面的检查，以及相关前端问题的解决。
常见问题
1、移动端如何定义字体font-family
三大手机系统的字体：
ios 系统
默认中文字体是Heiti SC
默认英文字体是Helvetica
默认数字字体是HelveticaNeue
无微软雅黑字体
android 系统
默认中文字体是Droidsansfallback
默认英文和数字字体是Droid Sans
无微软雅黑字体
winphone 系统
默认中文字体是Dengxian(方正等线体)
默认英文和数字字体是Segoe
无微软雅黑字体
各个手机系统有自己的默认字体，且都不支持微软雅黑
如无特殊需求，手机端无需定义中文字体，使用系统默认
英文字体和数字字体可使用 Helvetica ，三种系统都支持
1、 移动端定义字体的代码 */
body{font-family:Helvetica;}
2、winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉
3、webkit表单元素的默认外观怎么重置
.css{-webkit-appearance:none;}
4、webkit表单输入框placeholder的颜色值能改变么
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
5、webkit表单输入框placeholder的文字能换行么
ios可以，android不行~
6. 关闭iOS键盘首字母自动大写
在iOS中，默认情况下键盘是开启首字母大写的功能的，如果启用这个功能，可以这样：
7. 关闭iOS输入自动修正
和英文输入默认自动首字母大写那样，IOS还做了一个功能，默认输入法会开启自动修正输入内容，这样的话，用户经常要操作两次。如果不希望开启此功能，我们可以通过input标签属性来关闭掉：
8. 禁止文本缩放
当移动设备横竖屏切换时，文本的大小会重新计算，进行相应的缩放，当我们不需要这种情况时，可以选择禁止：
html {-webkit-text-size-adjust: 100%}
需要注意的是，PC端的该属性已经被移除，该属性在移动端要生效，必须设置 `meta viewport’。
9. 移动端如何清除输入框内阴影
在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：
input,
textarea {
border: 0; /* 方法1 */
-webkit-appearance: none; /* 方法2 */}
10. 快速回弹滚动
我们先来看看回弹滚动在手机浏览器发展的历史：
早期的时候，移动端的浏览器都不支持非body元素的滚动条，所以一般都借助 iScroll;
Android 3.0/iOS解决了非body元素的滚动问题，但滚动条不可见，同时iOS上只能通过2个手指进行滚动；
Android 4.0解决了滚动条不可见及增加了快速回弹滚动效果，不过随后这个特性又被移除；
iOS从5.0开始解决了滚动条不可见及增加了快速回弹滚动效果
在iOS上如果你想让一个元素拥有像 Native 的滚动效果，你可以这样做：
.xxx {
overflow: auto; /* auto | scroll */
-webkit-overflow-scrolling: touch;
}
PS：iScroll用过之后感觉不是很好，有一些诡异的bug，这里推荐另外一个 iDangero Swiper，这个插件集成了滑屏滚动的强大功能（支持3D），而且还有回弹滚动的内置滚动条，官方地址：
iDangero
11.禁止复制该文本 如果用户可以选择,则给用户以网页的感觉,App高大上的感觉就出不来了
test{
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;}
12. 移动端取消touch高亮效果
在做移动端页面时，会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素，默认都会在激活状态时，显示高亮框，如果不想要这个高亮，那么你可以通过css以下方法来进行全局的禁止：
html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
但这个方法在三星的机子上无效，有一种妥协的方法是把页面非真实跳转链接的a标签换成其它标签，可以解决这个问题。
13. 如何禁止保存或拷贝图像（IOS）
通常当你在手机或者pad上长按图像 img ，会弹出选项 存储图像 或者 拷贝图像，如果你不想让用户这么操作，那么你可以通过以下方法来禁止：
img { -webkit-touch-callout: none; }
14、假如手机网站不用兼容IE浏览器，一般我们会使用zeptojs。
zeptojs内置Touch events方法，具体可以看http://zeptojs.com/#Touch events
看了一下zeptio新版的API，已经支持IE10以上浏览器，对zeptojs可以选择使用！
15、防止手机中网页放大和缩小。
当然，user-scalable=0,有的人也写成user-scalable=no，都可以的。
16、apple-mobile-web-app-capable
apple-mobile-web-app-capable是设置Web应用是否以全屏模式运行。
如果content设置为yes，Web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。
17、format-detection
format-detection 启动或禁用自动识别页面中的电话号码。
语法：
说明：
默认情况下，设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能。
18、Html5调用安卓或者iOS的拨号功能
19、html5GPS定位功能
具体请看：http://www.w3school.com.cn/html5/html_5_geolocation.asp
20、上下拉动滚动条时卡顿、慢 Android3+和iOS5+支持CSS3的新属性为overflow-scrolling
body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
21、长时间按住页面出现闪退
element { -webkit-touch-callout: none;}
22、iphone及ipad下输入框默认内阴影
Element{
-webkit-appearance: none;
}
23、ios和android下触摸元素时出现半透明灰色遮罩
Element { -webkit-tap-highlight-color:rgba(255,255,255,0)}
24、active兼容处理 即 伪类 :active 失效
方法一：body添加ontouchstart
方法二：js给 document 绑定 touchstart 或 touchend 事件
a {color: #000;}
a:active {color: #fff;}
bar
document.addEventListener('touchstart',function(){},false);
25、动画定义3D启用硬件加速
Element {
-webkit-transform:translate3d(0, 0, 0)
transform: translate3d(0, 0, 0);
}
26、Retina屏的1px边框
Element{
border-width: thin;
}
27、webkit mask 兼容处理
某些低端手机不支持CSS3 mask，可以选择性的降级处理。
比如可以使用js判断来引用不同class：
if( ‘WebkitMask’ in document.documentElement.style){
alert(‘支持mask’);
} else {
alert(‘不支持mask’);
}
27、浏览器私有及其它meta
以下属性在项目中没有应用过，可以写一个demo测试以下！
QQ浏览器私有
全屏模式
强制竖屏
强制横屏
应用模式
UC浏览器私有
全屏模式
强制竖屏
强制横屏
应用模式
其它
针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓
微软的老式浏览器
windows phone 点击无高光
29、旋转屏幕时，字体大小调整的问题
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:100%;
}
30、transition闪屏
/设置内嵌的元素在 3D 空间如何呈现：保留3D /
-webkit-transform-style: preserve-3d;
/ 设置进行转换的元素的背面在面对用户时是否可见：隐藏 /
-webkit-backface-visibility:hidden;
31、圆角bug 某些Android手机圆角失效
background-clip: padding-box;
32、顶部状态栏背景色
说明：
除非你先使用apple-mobile-web-app-capable指定全屏模式，否则这个meta标签不会起任何作用。
如果content设置为default，则状态栏正常显示。如果设置为blank，则状态栏会有一个黑色的背景。如果设置为blank-translucent，则状态栏显示为黑色半透明。
如果设置为default或blank，则页面显示在状态栏的下方，即状态栏占据上方部分，页面占据下方部分，二者没有遮挡对方或被遮挡。
如果设置为blank-translucent，则页面会充满屏幕，其中页面顶部会被状态栏遮盖住（会覆盖页面20px高度，而iphone4和itouch4的Retina屏幕为40px）。
默认值是default。
33、ios 设置input 按钮样式会被默认样式覆盖
解决方式如下：
input,
textarea {
border: 0;
-webkit-appearance: none;
}
34.安卓里有一像素白边问题
图片描述
像这个结构可以用dl dd dt 结构写，dl的width可以有两种设置的方法：
（1）width：100%；（2）width：94%；pading：3%；
以上两种设置宽度的方式都可以，但是第二种会出现1像素白边的问题，所以建议用第一种，
边距在dd，dt里设置这个问题只有在安卓里才出现的，用谷歌里的模拟器测不出来，只有用手机才能看出来，
我用三星小米的手机都测出有这个问题
35.手机端去掉点击时默认的边框
*:focus {outline: none;}
* { -webkit-tap-highlight-color: trans
36、苹果手机的一些设置。
如果content设置为yes，Web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示。
你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。
37、format-detection设置。
format-detection 启动或禁用自动识别页面中的电话号码、邮箱地址。
38、ios和android下触摸元素时出现半透明灰色遮罩
Element {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}
39、动画定义3D启用硬件加速
Element {
-webkit-transform:translate3d(0, 0, 0)
transform: translate3d(0, 0, 0);
}
注意：3D变形会消耗更多的内存与功耗
40、旋转屏幕时，字体大小调整的问题
*{
-webkit-text-size-adjust:100%;
}
41、IOS中input键盘事件keyup、keydown、keypress支持不是很好
问题是这样的，用input search做模糊搜索的时候，在键盘里面输入关键词，会通过ajax后台查询，然后返回数据，然后再对返回的数据进行关键词标红。用input监听键盘keyup事件，在安卓手机浏览器中是可以的，但是在ios手机浏览器中变红很慢，用输入法输入之后，并未立刻相应keyup事件，只有在通过删除之后才能相应！
解决方法：可以用html5的oninput事件去代替keyup
42、图片无法正常加载时 用默认图片替代的功能
43、 禁止鼠标右键
44. audio元素和video元素在ios和andriod中无法自动播放
$('html').one('touchstart',function(){
audio.play()
})