移动端主流方案

单独制作移动端页面(主流)

京东商城手机版

淘宝触屏版

苏宁易购手机版

携程网手机版

响应式页面兼容移动端(其次)

三星手机官网

单独制作移动端页面（主流)

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

响应式兼容PC移动端

响应式网站:即pc和移动端共用一套网站，只不过在不同宽度的屏幕下，样式会自动适配。三星电子官网: www.samsung.com/cn/，通过判断屏幕宽度来改变样式，以适应不同终端。

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

移动端技术解决方案

浏览器

移动端浏览器基本以 webkit内核为主，因此我们就考虑 webkit兼容性问题。我们可以放心使用H5标签和CSS3样式。

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

CSS 初始化 normalize.css

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

优点:

Normalize.css:保护了有价值的默认值

Normalize.css:修复了浏览器的bug

Normalize.css:是模块化的

Normalize.css:拥有详细的文档

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

CSS3盒子模型 box-sizing

传统模式宽度计算:盒子的宽度=CSS中设置的width + border+ padding

CSS3盒子模型:盒子的宽度=CSS中设置的宽度width里面包含了border和 padding也就是说，我们的 CSS3中的盒子模型， padding 和border不会撑大盒子了

移动端可以全部 CSS3盒子模型

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

特殊样式

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

移动端常见布局方式

移动端技术选型

单独制作移动端页面（主流)

流式布局(百分比布局)

flex弹性布局（强烈推荐).

less+rem+媒体查询布局·混合布局

响应式页面兼容移动端(其次)

媒体查询

bootstrap