移动端基础知识（下）

---

一、移动端开发选择

1.移动端主流方案

1. 单独制作移动端页面（主流）
   京东商城手机版
   淘宝触屏版
   苏宁易购手机版
   ……
2. 响应式页面兼容移动端（其次）
   三星手机官网
   ……

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

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

例：m.taobao.com、m.jd.com……

3.响应式兼容PC移动端

三星电子官网：https://www.samsung.com/cn/,通过判断屏幕宽度来改变样式，以适应不同终端。

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

4.总结

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

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

二、移动端技术解决方案

1.移动端浏览器

移动端浏览器基本以webkit内核为主，因此我们就考虑webkit兼容性问题。

我们可以放心使用H5和CSS3样式。

同时我们浏览器的私有前缀我们只需要考虑添加webkit即可

2.CSS初始化 normalize.css

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

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

官网地址：http://necolas.github.io/normalize.css/

3.CSS3盒子模型 box-sizing

• 传统模式宽度计算：盒子的宽度=CSS中设置的width+border+padding
• CSS3盒子模型：盒子的宽度=CSS中设置的宽度width里面包含了border和padding，也就是说，我们的CSS3中的盒子模型，padding和border不会撑大盒子了

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

传统盒子orCSS3盒子模型？

• 移动端可以全部css3盒子模型
• pc端如果完全需要兼容，我们就需要用传统模式，如果不考虑兼容性，我们就选择css3盒子模型

4.特殊样式

		 /* 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;
        }

三、移动端常见布局

移动端技术选型
移动端布局和我们以前学习的pc端有所区别：

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

• 流式布局（百分比布局）
• flex弹性布局（强烈推荐）
• less+rem+媒体查询布局
• 混合布局

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

• 媒体查询
• bootstarp

1.流式布局（百分比布局）

• 流式布局，就是百分比布局，也称非固定像素布局
• 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充
• 流式布局方式是移动web开发使用的比较常见的布局方式
• max-width 最大宽度（max-height 最大高度）
• min-width 最小宽度 （min-height 最小高度）