一、调试方式
1.模拟器调试（谷歌控制台）
2.真机调试
a.本地服务器启动，通过localhost进行访问
b.设置需调试的手机分辨率
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<meta name="viewport" content="width=320px">c.真机调试
1)电脑的本地服务器启动，且切换为在线模式
2)测试用手机和电脑处于同一个局域网
3)通过IP进行访问（运行-cmd-ipconfig）
二、书写代码注意点
1．按照正常PC端书写（如设计图给出的是960px宽度，36px基准字体，则按照正常px进行编写）
2．相应的px转换为百分比（横向）/rem（纵向）
24/640转换为2400/640 ctrl+shift+Y + %，因系统会自动对24/640进行四舍五入保留小数点后2位，直接计算的数字不精确
3．图像以及特殊字体的处理
4．嵌套规则与SEO的细节调整
a标签可以套块元素
img的title（提示性文本，用于SEO）属性删掉，因为移动端没有hover状态
5．fixed用法
利用position: fixed固定头部和底部内容
三、CSS3提供的新单位
rem 针对html（根元素）的字体大小进行比例计算
rem * rem —— 部分设备不支持，横向rem解读有无
建议使用：横向百分比、纵向rem
盒模型：主要影响line-height、font-size
ch 字符0（零）的宽度
vw viewport width 1vw = 视窗宽度的1%
vh viewport height 1vh = 视窗宽度的1%
vmin vw和vh中较小的那个
四、移动端设计流程
1．拿到设计图
a.设计师提供图纸为最大分辨率（一般为960px、1080px、640px），需要向下兼容小分辨率
b.确定页面中的字体大小是否符合规范
1)字体是否偶数、整数
2)最小字体 —— 320px屏幕宽度下 >= 12px，1080px屏幕宽度下 >= 42px（字体大小为1080*(12/320)=40.5，取偶数、整数并向上取整）
2．重置视口 —— viewport
<meta name="viewport" content="属性值">
width 设置布局视口的宽度
height 设置布局视口的高度
initial-scale 设定页面初始缩放比例（0~10.0，1表示百分百——原始状态）
minimum-scale 设定最小缩小比例（0~10.0）
maximum-scale 设定最大放大比例（0~10.0）
user-scalable 设定用户是否可以缩放(yes/no)
举例：
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
initial-scale=1一般可省略
a.让视窗大小和设备宽度保持一致
b.尽可能对用户的一些操作进行限制（放大、缩小页面）
3．根据设备宽度改变根元素的字体大小
html元素的font-size大小→JS文件辅助
辅助原理：
检测到当前的屏幕宽度 设计图的屏幕宽度
---------------- = -----------------
要计算出的字体大小 设计图最小字体大小
a.JS文件的引入 —— 放在head里（zepto在common之前）
<script type="text/javascript" src="js/flexible.js"></script>
b.JS文件的修改
修改flexible.js的屏幕宽度和相应字体大小
五、移动端视口处理
1.视口处理原理
通过viewport把自己冒充成更宽的屏幕，大多数移动浏览器默认把布局视口的宽度设为：980px（IE10默认设定为1024px）。
然后，尽可能放大视口，（布局视口宽度保持不变）以便在屏幕中显示完整的网站。
2.常见视口宽度
a.iPhone —— 980
b.iPad —— 1024
c.Android —— 980
d.WinPhone —— 1024
3.设置需调试的手机分辨率
<meta name="viewport" content="width=320px">
<meta name="viewport" content="属性值">
width 设置布局视口的宽度
height 设置布局视口的高度
initial-scale 设定页面初始缩放比例（0~10.0，1表示百分百——原始状态）
minimum-scale 设定最小缩小比例（0~10.0）
maximum-scale 设定最大放大比例（0~10.0）
user-scalable 设定用户是否可以缩放(yes/no)
举例：
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
initial-scale=1一般可省略
a.让视窗大小和设备宽度保持一致
b.尽可能对用户的一些操作进行限制（放大、缩小页面）
六、自身样式处理——盒模型
1.处理原则
横向百分比、纵向rem
2.横向处理
根据父级宽度计算百分比
3.纵向处理
rem 针对html（根元素）的字体大小进行比例计算
4.横向为何不用rem？
rem * rem —— 部分设备不支持，横向rem解读有无
5.纵向为何不用%？
纵向使用百分比时，根据父级宽度进行计算。
即针对最近的块祖级元素的文字显示方向而定。
如果文字显示方向是水平方向，即margin和padding（横纵）根据宽度计算；如果文字显示方向是垂直方向，则margin和padding（横纵）根据高度计算。
目前文字垂直方向显示只有IE支持。
如下代码为等价：
.box {
width: 400px;
height: 100px;
}
.con {
width: 50%;
height: 20%;
padding: 20%;
}
.con {
width: 200px;
height: 20px;
padding: 80px;
}七、文本样式处理
line-height：针对元素自身字体尺寸进行计算，如果当前元素字体大小为16，则line-height:100% == line-height: 16px;
em、rem 相对度量单位
em 针对父级元素的字体大小进行比例计算
八、图像的特殊处理
background-size: 用于定义背景图尺寸大小
属性取值范围：
a.固定/绝对度量单位 —— 如px
b.相对度量单位 —— 如百分比% rem
c.auto（自动） —— cover contain
1)cover：覆盖全部容器，此时背景图有可能无法完全显示
2)contain：覆盖容器，但当宽或高任意一个达到最大值则停止拉伸，容器有可能产生空白区域
background-size: 100% 100%; （水平方向 垂直方向）
background-size: contain;
background-size: cover;
九、字体的特殊处理
字体自定义：
@font-face {
font-family: 'newfont';
src: local ('STXINWEI'),
url(font/STXINWEI.TTF) format('truetype'),
url(STXINWEI.oft) format('truetype');
/*可定义多个字体，浏览器按顺序下载，若第一个字体可用，则不会下载第二个，若不可用，则依次向下下载*/
}
.con div {
font-family: 'newfont';
/*调用字体*/
}a.@font-face用于定义一个“用户/自定义字体”需要有字体名字（font-family），以及字体的路径属性（src）
b.local用于定义用户本地的字体名称，当用户本地已经存在同样的字体时，则不再下载（可以节省网上下载的流量和成本）
c.url属性，用于书写自定义字体的路径（在服务器端），如果浏览器在本地当中没有找到字体，会将url中设置的字体加载到页面当中。
d.format 用于提示该资源url所引用的字体格式
e.truetype .ttf
f.opentype .ttf .oft
十、嵌套规则细节调整
a标签可以套块元素 —— 节省代码、方便用户点击没有hover的状态
a标签，点击区域的灰色阴影需要去掉，如下
a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}十一、SEO的细节调整
img的title（提示性文本，用于SEO）属性删掉，因为移动端没有hover状态
十二、响应式布局
Responsive Web Design
将已有的开发技巧（弹性-使用百分比的布局、弹性图片-background-size、媒体、媒体查询）整合起来，命名为响应时网页设计。
是一种针对任意设备，均能够“完美”布局的一种现实机制。
简言之，一个网站能够兼容多个终端，而不是为每个终端制作一个特定版本。
1.响应式布局流程
a.进行视口控制
b.利用CSS3媒体查询（CSS3 Media Query）告知浏览器如何为指定的视图宽度渲染页面。（为不同宽度制定不同的CSS，实现不同的布局）
c.对于临界值/断点（媒体查询的取值）之间，采用百分比、em、rem等相对度量单位实现过渡。
1)断点： 样式发生瞬间变化的px值大小（@media中的值）通常采用的断点，是各个设备的横屏、纵屏最大值
320 480 640 768 1024 1280 1366 1600 1920
2)通常对于多个分辨率书写时，遵循渐进增强的原则，即从移动端开始。
先书写基准样式（通常样式），再书写移动端样式，最后书写桌端样式（屏幕分辨率由小到大）
优雅降级 渐进增强（百度查资料）—主要和设备兼容挂钩
2.媒体查询 两种书写方法：
a.style标签内书写
<style>
@media 媒体 and/or (属性：属性值) and/or (属性：属性值) {
}
@media all and (min-width: 300px) {
}
</style>b.外部引入，有条件的加载样式表
<head>
<link rel="stylesheet" href="XXX.ccc" media="设备 条件 (属性：属性值)">
<link rel="stylesheet" href="XXX.css" media="screen and (max-width: 640px)">
</head>c.常见媒体特性/属性：
width/min-width/max-width 布局视口的宽度
height/min-height/max-height 布局视口的高度
device-width device-height
设备屏幕的宽度/高度
orientation 设备方向
aspect-radio/min-aspect-radio/max-aspect-radio 视口宽度比
device-aspect-radio 屏幕的宽高比 例子如下：
<style>
.wrap {background: #000}
@media screen and (min-device-aspect-radio: 9 / 16) {
.wrap {
background: #39f;
}
}
</style> 跨平台 - 跨系统 - 跨分辨率
跨系统 Native App、WEB APP、 Hybird APP
跨分辨率 - 响应式布局（网页）
十三、移动端框架详解
1．click事件延迟
a.移动端上设备中使用click事件和在PC端有所不同，大多数基于触摸的浏览器设备，在点击的时候会有300ms的事件触发等待时间。
原因在于点击后面还有个双击缩放的操作，这个涉及到触摸设备的手势交互行为原生设计。
设备需要通过事件判断是单机还是双击操作。
2．hover效果
移动端hover效果也会失效
3．touch触摸事件
a.touchstart
当手指触摸屏幕时触发
b.touchmove
当手指在屏幕上滑动时连续触发
c.touchend
当手指从屏幕移开时触发
4．触摸属性
a.touches
当前位于屏幕上的所有手指列表
b.targetTouches
位于当前DOM元素上的手指列表
c.changedTouches
涉及当前事件手指的列表
5．常用触控信息
a.identifier
唯一标识触摸回话，是一个整数（绘图应用等会涉及到）
b.target
事件目标对象
c.clientX/clientY/pageX/pageY/screenX/screenY
clientX/clientY：触摸点相对于浏览器视口左上角的位置
pageX/pageY：触摸点相对于页面左上角的位置
screenX/screenY：触摸点相对于屏幕左上角的位置
总结：page包含滚动距离，client不包含滚动距离，screen则以屏幕为基准
6．zepto
a.专为mobile webkit浏览器开发的JavaScript框架，但同时兼容FF、Opera，不兼容所有的IE；
b.zepto与jQuery的关系
1)语法：Zepto语法大部分与jQuery一样
2)性能：Zepto在移动端中性能比较优越
3)应用：京东、当当网、小米官网等都使用了Zepto
c.Zepto下载
1)官网下载的Zepto默认包含zepto、event、ajax、form、ie，其他模块需要自己引入
2)github下载的zepto没有默认包含、根据需求自己引入
d.选择器支持
1)支持基本选择器
2)支持伪类选择器：需要映入selector.js