[TOC] # 1.移动端基础  ## meta视口标签 ~~~ <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"> ~~~  ## meta视口标签属性  ## 二倍图 ## 实际开发时 准备的图片是要开发的尺寸大2倍 背景缩放background-size （手机开发）  ●单位:长度I百分比| cover Icontain; ●cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。 ●contain把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域 background-size 讲解 background-size 设置时，宽高 是图片按比例缩放为 宽高值  # 移动端主流开发方案  ## 移动端主流开发方案2大方向 |  |  | | --- | --- | 总结 现在市场常见的移动端开发有单独制作移动端页面和响应式页面两种方案 现在市场主流的选择还是单独制作移动端页面 # 移动端技术解决方案 ## 移动端浏览器  ## CSS初始化normalize.css ### 移动端CSS初始化推荐使用normalize.css/ ●Normalize.css :保护了有价值的默认值 ●Normalize.css :修复了浏览器的bug ●Normalize.css :是模块化的 ●Normalize.css :拥有详细的文档 官网地址:[http://necolas.github.io/normalize.css/](http://necolas.github.io/normalize.css/) ### CSS3盒子模型 box-sizing （移动端必备）   传统or CSS3盒子模型? ●移动端可以全部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; }