移动端基础

1.移动端基础

移动端调试方法

2.视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口layout viewport、视觉视口visual viewport和理想视口ideal viewport

2.1 meta视口标签

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

3 二倍图

物理像素&物理像素比

多倍图

背景缩放background-size

4.移动端开发选择

4.1 单独移动端页面（主流）

4.2 响应式兼容PC移动端

5、移动端技术解决方案

移动端浏览器

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

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

5.2 CSS3 盒子模型 box-sizing

5.3特殊样式

/*CSS3盒子模型*/
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
1.点击高亮我们需要清除清除 设置为transparent 完成透明
*{ -webkit-tap-highlight-color: transparent;}
2.在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式
input { -webkit-appearance: none;}
3.禁用长按页面时的弹出菜单
 img,a { -webkit-touch-callout: none; }