移动WEB开发基础和流式布局

1. 移动端基础

  1.1 浏览器现状

pc端常见浏览器
谷歌浏览器、火狐浏览器、苹果浏览器、欧朋浏览器、IE浏览器等

移动端常见浏览器
百度手机浏览器，UC浏览器，谷歌浏览器，火狐浏览器，搜狗手机浏览器，QQ浏览器，360安全浏览器，欧朋浏览器 以及其他杂牌浏览器

兼容移动端主流浏览器，处理Webkit内核浏览器即可。

国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。

  1.2 移动端调试方法

1. Chrome DevTools (谷歌浏览器) 的模拟手机调试。
2. 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器。
3. 使用外网服务器，直接IP或域名访问。

2. 视口

视口(viewport) 就是浏览器显示页面内容的屏幕区域。
<视口可以分为： 布局视口，视图视口，理想视口。

  2.1 布局视口 layout viewport

1. 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
2. ios, Android基本都讲这个视口分辨率设置为980px,所以PC上页面大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放页面。
   

  2.2 视觉视口 visual viewport

1. 字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。
2. 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。
   

  2.3 理想视口 ideal viewport

1. 味蕾使用网站在移动端有最理想的浏览和阅读宽度而设定。
2. 理想是否，对设备来讲，是最有理想的视口尺寸。
3. 需要手动添加meta是否标签通知浏览器操作。
4. meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就有多宽。

  2.4 meta标签

	<mate name="viewport" content="width=device-width,  user-scalable=on, 
	initial-scale=1.0, maximum-scale=1.0, mimimum-scale=1.0" />

属性	解释说明
name	作为元数据的名称
content	作为元数据的值
width	宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale	初始化缩放比，大于0的数字
maximum-scale	最大缩放比，大于0的数字
minimum-scale	最小缩放比，大于0的数字
user-scalable	用户是否可以缩放，yes或no (1或0)

标准的viewport设置

1. 视口宽度和设备宽度保持一致
2. 视口默认缩放比1.0
3. 不允许用户自动缩放
4. 最大允许缩放比1.0
5. 最小允许缩放比1.0

3. 二倍图

  3.1 物理像素&物理像素比

1. 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置豪的，比如苹果6/7/8 是750 * 1334。
2. 我们开发时的1px不是一定等于1个物理像素的。
3. pc端，1个px等于1个物理像素，但是移动端就不相同了。
4. 一个像素(px)能显示的物理像素点的个数，称为物理像素比或屏幕像素比。

  3.2 视网膜屏幕

1. pc端和早期的手机屏幕: 1css像素=1物理像素。
2. Retina(视网膜屏幕)是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。
   

  3.2 多倍图

1. 对于一张50px*50px的图片，在手机Retina屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片的模糊。
2. 在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题。
3. 通常使用二倍图，因为iPhone 6/7/8 的影响，但是现在还存在3/4倍图的情况，这个看实际开发，公司需求。
4. 背景图片注意缩放问题。

	/* 在iPhone下面 */
	img{
		/*原始图片100*100px*/
		width:50px;
		height:50px;
	}
	.box{
		/*原始图片100*100px*/
		background-size:50px 50px;
	}

  3.3 背景缩放 background-size

background-size属性规定背景图像的尺寸

	/* 1.单位：    px|百分比|cover|contain|
	   2.cover:   覆盖整个背景区域;
	   3.contain: 高度或宽度完全适应内容区域; */
	background-size:图片宽度 图片高度;
	background-size:cover;
	background-size:contain;

  3.4 二倍精灵图做法

1. 在firework里面把精灵图等比例缩放为原来的一半.
2. 之后根据大小测量坐标.
3. 注意：代码里面background-size也要写：精灵图原来宽度的一半.

  3.5 多倍图切图 cutterman

@1X 1倍图原图
@2X 2倍图原图
@3X 3倍图原图

4. 移动开发解决方案与开发选择

  4.1 移动端主流方案

1.单独制作移动端页面(主流)
       通常情况下，网站域名前面加 m(mobile) 可以打开移动端。通过判断设备，如果是移动设备打开，则跳转移动端页面。

2.响应式页面兼容移动端(其次)
       通过判断屏幕宽度来改变样式，以适应不同终端。
       缺点：制作麻烦，需要花很大精力去调兼容性问题
    

  4.2 移动端浏览器

1. 移动端基本都是基于webkit内核为主，因此我们就考虑webkit兼容性问题.
2. 我们可以放心使用H5标签和css3样式.
3. 同时我们浏览器的私有前缀我们只需要考虑添加webkit即可.

  4.3 CSS初始化 normalize.css

移动端 CSS 初始化可以使用normalize.css
   1. normalize.css:保护了有价值的默认值。
   2. normalize.css:修复了浏览器的bug。
   3. normalize.css:是模块化的。
   4. normalize.css:拥有详细的文档。
官网地址： http://necolas.github.io/normalize.css

  4.4 特殊样式

	/*CSS3盒子模型*/
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	/*清除点击时出现的高亮效果*/
	-webkit-tap-highlight-color:transparent;
	/*在iOS上给按钮和输入框自定义样式*/
	-webkit-appearance:none;
	/*禁用长按页面时的弹出菜单*/
	img,a{-webkit-touch-callout:none;}

5. 移动端常见布局

  5.1 移动端技术选型

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

1. 流式布局(百分比布局)
2. flex弹性布局(强烈推荐)
3. less+rem+媒体查询布局
4. 混合布局

2.响应式页面兼容移动端(其次)
5. 媒体查询
6. bootstarp

  5.2 流式布局(百分比布局)

1. 流式布局，就是百分比布局，也称非固定像素布局。
2. 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
3. 流式布局方式是移动web开发使用的比较常见的布局方式。
4. max-width 最大宽度（max-height 最大高度）
5. min-width 最小宽度 （min-height 最小高度）

  5.3 设置视口标签以及初始化

	
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, 
	maximum-scale=1.0, minimum-scale=1.0">
	
	<link rel="stylesheet" href="css/normalize.css">