1、 移动web开发（pc端的页面用手机浏览器打开）
这部分跟web前端开发差别不大，使用的技术都是html+css+js。区别为手机浏览器是webkit的天下，pc端是IE的天 下。手机网页可以理解成pc网页的缩小版加一些触摸特性。因为是在浏览器中进行的网页开发，所有最终代码具有跨系统平台的特性
2、 web app开发（web应用程序）
特指的是用html5技术开发，之所以叫web app是因为他比较接近客户端应用程序的用户体验，可以和系统深度融合，调用一些只有客户端才能调用的功能（比如在移动设备上利用html5开发出的网页可以访问电话、摄像头等本地功能）.
3、meta标签
html代码中最关键的就是meta标签设置，开发移动端页面首先一定要设置viewport （可视区域）
device-width - 设备的宽度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
5、 使用什么布局？
很多网站都是使用固定布局，以前凡客、淘宝也有段时间使用过流式布局，现在都改成固定布局。
但是固定布局不适合移动开发。
可以使用
① 响应式布局：responsive 高清图片 retina px em rem
② flex弹性盒子布局：高效居中方案 等比例填充列行 background-size font-size 多行文本溢出
6、 flexbox弹性盒子布局
根据元素个数不同，自动填充
display:-webkit-flex; 表示使用弹性布局
子元素设置 flex:num; 占容器的比例
划分方式：
① 等比划分（flex:num;表示）
② 混合划分（有固定的像素（eg：100px）与flex:num;混合在一起）
③ 不定宽高的水平垂直居中：
position：absolute；
top：50%；
left：50%；
transform：translate（-50%，-50%）；flexbox版不定宽高的水平垂直居中：
.parent{
justify-content : center; //子元素水平居中
align-items : center; //子元素垂直居中
display : -webkit-flex;
}flexbox弹性盒子布局，介于兼容性问题，建议使用旧版方案：
①新flex布局：
display : -webkit-flex;
-webkit-fiex: 1; //子元素的flex
justify-content : center;
align-items : center;②旧flexbox布局：
display : -webkit-flex-box;
-webkit-fiex-box: 1; //子元素的flex
box-pack : center;
box-center: center;一种垂直居中的hack：
（1）hack方式
li{
line-height: 568px;
vertical-align:middle;
}
li img{
vertical-align:middle;
}(2)更优雅的方式，对于高级浏览器来说
// 父元素
position:absolute;// 子元素
li{
display: table-cell;/*盒模型变成表格的元素*/
vertical-align: middle;
}(3)另一种垂直居中方式
li{
display: -webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
}7、 响应式布局
开发一个页面，在所有的设备上都能够完美展示。
媒体查询：@media screen and (max-width:100px) { }
媒体类型：screen（屏幕）
print（打印机）
handheld（手持设备）
all（通用）
常用媒体查询参数：
width —— 视口宽高
height —— 视口宽高
device-width —— 设备的宽高
device- height —— 设备的宽高
orientation：检查设备处于横向（landscape）还是竖屏（portrait）
响应式设计设计点
设计点一：百分比布局
仅仅使用媒体查询来适应不同固定宽度设计，只会从一组css到另一组css的切换。两种设计之间没有任何平滑渐变。只使用媒体查询，布局有时会变得不可控制。
当然，这只是建议，也有一些页面采用固定布局的情况下能够很好的在一些没有考虑过媒体查询情况下的设备上很好的展示。
设计点二：弹性图片
思路：无论何时，全都包在图片的元素宽度范围内，以最大的宽度同比完整的显示图片。
img{ max-height: 100% }
设计点三：重新布局，显示与隐藏
当页面达到手机屏幕宽度的时候，很多时候就要放弃一些传统的页面设计思想。力求页面简单，做如下处理：
① 同比例缩减元素尺寸
② 调整页面结构布局
③ 隐藏冗余的元素
经常需要切换位置元素使用【绝对定位】，减少重绘提高渲染性能。
关于响应式设计的思考：
根据响应式设计的理念，一个页面包含所有设备不同屏幕的样式和图片，当一个移动设备访问一个响应式的页面，就会下载pc，笔记本，ipad等不同设备对应的样式。而这些样式却是冗余的，完全没有用。
权衡利弊：性能不是最优，但是能减少重复开发。
8、 特殊样式处理
（1） 高清图片
在移动web页面上渲染图片，为了避免图片产生模糊，图片的宽度应该用物理像素单位渲染，即是100 * 100的图片，应该使用100dp * 10dp。
width：（w_value/dpr）px；
height：（w_height/dpr）px；
（2） 一像素边框
同样是retina屏幕下的问题，根本原因：1px使用2dp渲染。
border：0.5px；（错误），仅仅ios8可以使用
通用方案：scaleY（0.5）
（3） 相对单位rem
为了适应各大屏幕的手机，px略显固定，不能根据尺寸的大小而改变，使用相对单位更能体验页面兼容性。
em：是根据父节点的font-size为相对单位
rem：是根据html的font-size为相对单位
em在多层嵌套下，变得非常难以维护，rem更加能作为全局统一设置的度量
那么，rem的基值设置为多少比较好？
回归目的：为了适应各大手机屏幕
rem = screen.width / 20
不使用rem的情况：font-size
一般来讲font-size是不应该使用rem的相对单位的。因为字体的大小是趋向于阅读的实用性，并不适合于排版布局。
同理，趋向于一些固定的元素的特性。我们不使用rem而改为使用px去确保在不同屏幕上表现一致（跟rem的目的相反）。
（4） 多行文本溢出•••
单行文本溢出，对title类的使用非常多，而多行文本类，在详情介绍则用的比较多。
//单行文本溢出…
.inaline {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
//多行文本溢出…
.intwoline {
display: -webkit-box: !important;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}9.rem的看法
rem单位确实好处蛮多的，它是相对于根节点，让我们整个网站单位可以统一。还可以让我们的字体更好的自适应网站的大小。但是，你用过了就知道，它会出现一个问题：
用Chrome浏览器打开你做的网站的时候，有时候会出现字体很大的情况。但是刷新一下页面就好了。
之所以会出现这种情况，原因是因为我们为了计算方便，将原本默认1rem=16px修改1rem=10px。因此，我们在html中通常做了如下设置：
html {font-size: 62.5%; /**10 ÷ 16 × 100% = 62.5% 1rem = 10px **/}
1
但是呢，Chrome浏览器有时候会忽略了html的设置。于是在初始化页面的时候，出现了上面字体过大的情况，本来1.6rem应该渲染成16px的字体，却被渲染成了16*1.6=25.6px大小了。
问题解决
你仔细研究会发现，出现字体过大的“元素”，通常是没有设置font-size的，元素的font-size是继承根目录的，因此，字体会变大。
因此，最佳的一种解决方案是：
在你要展现的文字父级或者其本身设置font-size
第二种解决方案：
我们在页面中添加style样式，给body设置font-size
例如把下面的代码放到 head 里面：
<style>
body {
font-size: 1.2rem;
}
</style>
10、补充
关于 dpr(设备像素比)。
dpr(设备像素比) = 物理像素 / 设备独立像素。
在不同的屏幕上（普通屏幕 VS retina 屏幕），css 像素所呈现的大小（物理尺寸）是一致的，不同的是1个 css 像素所对应的物理像素个数是不一致的。
在普通屏幕下，1个 css 像素 对应 1个物理像素（1:1），在retina 屏幕下，1个 css 像素对应 4个物理像素（1:4）。
计算方式是在水平或垂直方向上，一个物理像素中可以放两个 css 像素，此时 dpr = 2 / 1 = 2。
