移动布局中的 4. 移动端开发选择 5. 移动端技术解决方案 6. 移动端常见布局

4. 移动端开发选择

1. 移动端主流方案

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

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

通常情况下，网址域名前面加m（moblie）可以打开移动端。通过判断设备，如果是移动设备，如果是移动设备打开，则跳转到移动端页面。
  比如： m.taobao.com    m.jd.com     m.suning.com 

3. 响应式兼容PC移动端

三星电子官网： www.sansung.com/cn/，通过判断屏幕宽度来改变样式，以适应不同终端。
 缺点： 制作麻烦，需要花很大精力去调兼容性问题。

4. 总结：

现在市场常见的移动端开发有单独只做移动端页面和响应式页面两种方案。
现在市场主流的选择还是 单独制作移动端页面。

5. 移动端技术解决方案

1. 移动端浏览器

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

2. CSS初始化 normalize.css

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

        1.Nrmalize.css ： 保护了有价值的默认值。
        2.Nrmalize.css ： 修复了浏览器的bug。
        3.Nrmalize.css ： 是模块化的。
        4.Nrmalize.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-aizing： content-box；   

传统or css3 盒子模型？

移动端可以全部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;}

命令演示：

    
    
    
    
    


    "#">含成员
    "button" value="按钮">

6.移动端常见布局

1. 移动端技术选型

移动端布局和以前我们学习的PC端有所区别：

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

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

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

			媒体查询
            bootstarp

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

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

			 max-width  最大宽度 （max-height 最大高度）
            min-width  最大宽度 （min-height 最小高度）

命令演示：

网页显示图：