4. 移动端开发选择

4.1 移动端主流方案

1. 单独制作移动端局面（主流）
2. 响应式页面兼容移动端（其次）

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

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

4.3 响应式页面兼容移动端

通过判断屏幕宽度来改变样式，以适应不同终端

如三星官网

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

5. 移动端技术解决方案

5.1 移动端游览器

移动端游览器基本以wekit内核为主，所以只考虑webkit兼容性问题。

简单来说 我们可以放心使用H5标签和CSS3样式

同时游览器私有前缀只需添加webkit

5.2 CSS初始化(normalize.css)

normalize.css

作用：

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

5.3 CSS3盒子模型（box-sizing）

• 传统模式宽度计算： 盒子的宽度 = CSS中设置的width+border+pandding
• CSS3盒子模型： 盒子的宽度=CSS中设置的宽度width里面包含了border和pandding，所以后两者不再撑大盒子

// 让盒子变为css3盒子模型，pandding和border不会再撑大盒子
box-sizing：border-box

5.4 特殊样式

         a  {
            /* CSS3盒子模型 */
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            /* 设置transparent 完成透明 */
            -webkit-tap-highlight-color: transparent;
            /* 在ios加入这个属性才能给按钮和输入框自定义样式 */
            -webkit-appearance: none;
            /* 禁用长按页面的弹出菜单 */


        }
         /* 禁用长按页面的弹出菜单 */
        img,a {
            -webkit-touch-callout: none;
        }