12-移动端技术选型

移动端技术选型

一、移动端主流方案

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

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

2、响应式页面兼容移动端（其次）、例如：三星手机官网

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

• 缺点：制作麻烦，需要花很大精力去调兼容性问题，而且后期维护成本高

二、移动端技术解决方案

1、移动端浏览器

• 移动端里游览器基本以webkit内核为主，因此只考虑webkit兼容性问题

• 可以放心使用H5标签和CSS3样式

• 同时我们浏览器的私有前缀我们只考虑添加webkit兼容性即可

2、CSS初始化，normalize.css

• 移动端css初始化样式推荐使用 normalize.css

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

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

3、CSS3盒子模型（box-sizing:border-box;）

• 移动端可以全部使用CSS3盒子模型（不考虑兼容性）

• PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性，我们就选择CSS3盒子模型

• 移动端兼容性写法-webkit-box-sizing:border-box;

4、移动端特殊样式

• 点击高亮背景需要我们清楚，设置为transparent完成透明

  • 链接等点击的时候会有一个默认的背景

  • -webkit-tap-highlight-color:transparent;

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

  • -webkit-appearence:none;

• 在移动端上禁止长按页面时弹出菜单

  • img ,a {-webkit-touch-callout：none;}

移动端技术选型

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

• 流式布局（百分比布局）

• flex弹性布局（强烈推荐）

• less+rem+媒体查询

• 混合布局

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

• 媒体查询

• bootstrap

一、流式布局（百分比布局）

• 流式布局，就是百分比布局，也称非固定像素布局。

• 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充

• 流式布局方式就是移动端Web开发使用的比较常见的布局方式

• max-width 最大宽度（max-height 最大高度）

• min-width 最小宽度（min-width 最小高度）

  //为了保护盒子在合理的范围内进行压缩，所以设置了最大宽度和最小宽度
  //屏幕有多宽，盒子就有多宽，最大980px 最小320px;
  width:100%;
  max-width:980px;
  min-width:320px;
  表示宽度在320px-980px之间可自由伸缩