移动web技术方案

移动web开发两种方案：

• 单独开发（主流）
• 响应式兼容pc和移动端（兼容性问题比较多）

移动端浏览器基本以webkit为主，对h5和css3支持度比较高，同时浏览器私有前缀只要考虑添加webkit即可。

css初始化

推荐normalize.css。

使浏览器更一致地渲染所有元素，并符合现代标准。它只针对需要规范化的样式。Normalize.css是重置浏览器元素样式表，Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。

特殊样式：

1.CSS3盒子模型

-webkit-box-sizing:border-box;
box-sizing:norder-box;

2.清除点击高亮

* {
     -webkit-tap-highlight-color: transparent;
  }

3.移动端浏览器默认的外观，在ios上需加这个属性才能给按钮和输入框自定义样式

input {
         -webkit-appearance: none;
        }

4.禁用长按页面时的弹出菜单

 img, a {
            -webkit-touch-callout: none;
        }

移动端技术选型

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

• 流式布局（百分比布局：通过盒子的宽度设置成百分比来根据屏幕宽度进行伸缩）--京东
• flex弹性布局--携程
• less+rem+媒体查询
• 混合布局

响应式页面兼容PC、移动端

• 媒体查询
• bootstrap