移动WEB开发基础

1.视口

<meta name="viewport" content="width=device-width, user-scalable=no, 
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

2.二倍图

2.1 背景缩放 background-size

background-size: 背景图片宽度 背景图片高度;

• 单位： 长度|百分比|cover|contain;
• cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
• contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

3.移动端技术解决方案

3.1 CSS初始化 normalize.css

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

• Normalize.css：保护了有价值的默认值
• Normalize.css：修复了浏览器的bug
• Normalize.css：是模块化的
• Normalize.css：拥有详细的文档
  官网地址： http://necolas.github.io/normalize.css/

3.2特殊样式

基本上每个移动端都添加

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

3.3流式布局属性

max-width 最大宽度 （max-height 最大高度）
min-width 最小宽度 （min-height 最小高度）