移动端开发选择

移动端开发选择#

移动端主流方案#

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

单独移动端页面（主流）#

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

响应式兼容PC移动端#

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

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

移动端技术解决方案#

移动端浏览器#

移动端浏览器基本以webkit内核为主，因此研究webkit兼容性问题。

放心使用H5标签和css3样式

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

CSS初始化 normalize.css #

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

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

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盒模型

传统盒模型

CSS3盒模型

特殊样式#

/*CSS3盒子模型*/box-sizing:border-box;-webkit-box-sizing:border-box;/*点击高亮需要清除，设置为transparent完成透明*/-webkit-tap-highlight-color:transparent;/*在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式*/-webkit-appearence:none;/*禁用长按页面时的弹出菜单*/img,a{-webkit-touch-callout:none;}

移动端常见布局#

移动端技术选型#

移动端布局和PC端有所区别：

1. 单独制作移动端页面（主流）
   • 流式布局（百分比布局）（京东）
   • flex弹性布局（推荐）（携程）
   • less+rem+媒体查询布局（苏宁）
   • 混合布局
2. 响应式页面兼容移动端（其次）
   • 媒体查询
   • bootstrap