移动端技术选型
一、移动端主流方案
1、独制作移动端页面（主流）
-
通常情况下，网址域名前加m(mobile)可以打开移动端。通过判断设备，如果是移动端设备打开，则眺到移动端页面。
2、响应式页面兼容移动端（其次）、例如：三星手机官网
-
通过判断屏幕宽度来改变样式，以适应不同的终端
-
缺点：制作麻烦，需要花很大精力去调兼容性问题，而且后期维护成本高
二、移动端技术解决方案
1、移动端浏览器
-
移动端里游览器基本以webkit内核为主，因此只考虑webkit兼容性问题
-
可以放心使用H5标签和CSS3样式
-
同时我们浏览器的私有前缀我们只考虑添加webkit兼容性即可
2、CSS初始化，normalize.css
-
移动端css初始化样式推荐使用 normalize.css
-
保护了有价值的默认值，修复了浏览器的bug，是模块化的，拥有详细的文档
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之间可*伸缩