移动端开发选择

移动端主流方案

（1）单独制作移动端页面【主流】

• 京东 多快好省，购物上京东！
• 淘宝 淘宝网触屏版
• 苏宁 苏宁易购(Suning.com)-送货更准时、价格更超值、上新货更快
• ……

（2）响应式页面兼容移动端【其次】

• https://www.samsungeshop.com.cn/
• ……

单独移动端页面（主流）

通常情况下，网址域名前面加m(mobile)可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。

响应式兼容PC移动端（其次）

通过判断浏览器窗口宽度来改变样式，以适应不同终端。

缺点：制作麻烦，需要花很大精力去调兼容性问题。

总结 

现在市场常见的移动端开发有单独制作移动端页面和相应式页面两种方案。

现在市场主流的选择还是单独制作移动端页面。

移动端技术解决方案

移动端浏览器

• 移动端浏览器基本以webkit内核为主，因此我们就考虑Webkit兼容性问题。
• 我们可以放心使用H5标签和CSS3样式
• 同时浏览器的私有前缀只需考虑添加Webkit即可。

CSS初始化 normalize.css

移动端CSS初始化推荐使用normalize.css/

• Normalize.css：保护有价值的默认值
• Normalize.css：修复了浏览器的bug
• Normalize.css：是模块化的
• Normalize.css：拥有详细的文档

官网地址：Normalize.css: Make browsers render all elements more consistently.http://necolas.github.io/normalize.css/

CSS3 盒子模型 box-sizing

• 传统模式宽度计算：盒子的宽度=CSS中设置的宽度+边框+内边距
• CSS3 盒子模型：盒子的宽度 = CSS 中设置的宽度，里面包含了边框和内边距

     这样一来，我们的 CSS3 中的盒子模型，内边距和边框不会撑大盒子了

/* CSS3盒子模型*/ 
box-sizing : border-box;
/* 传统盒子模型 */ 
box-sizing : content-box;

传统还是CSS3盒子模型？

• 移动端可以全部使用CSS3盒子模型
• PC端如果需要复杂的，就用传统模式，如果不考虑，我们就选择CSS3盒子模型

 特殊样式

/* CSS3盒子模型*/ 
box-sizing : border-box;
-webkit-box-sizing : border-box；
/* 点击高亮，我们一般需要清除，设置透明完成透明 */ 
/* 说明：例如链接在移动端默认点击时会有一个背景颜色高亮 */ 
-webkit-tap-highlight-color : transparent;
/* 例如可以这样： */ 
* {
     -webkit-tap-highlight-color : transparent;
}
/* 在移动端浏览器默认的外观在 iOS 上加上属性这个按钮和输入框自定义样式 */ 
-webkit-appearance : none;
/* 例如可以这样： */ 
input   {
     -webkit-appearance : none;
}
/* 禁用长页面时的弹出菜单*/ 
-webkit-touch-callout : none;
/* 这里以img及a为例子*/ 
img ,  a { -webkit-touch-callout : none; }