一. 移动web开发基础
1. 现状
浏览器现状
PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。
移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。
国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。
总结：兼容移动端主流浏览器，只要处理好Webkit内核浏览器即可。
手机屏幕现状
移动端设备屏幕尺寸非常多，碎片化严重。Android设备有多种分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等，还有传说中的2K，4k屏。近年来iPhone的碎片化也加剧了，其设备的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208 等。作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是 px 。
常见移动端屏幕尺寸：
移动端调试方法
- Chrome DevTools（谷歌浏览器）的模拟手机调试
- 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器
- 使用外网服务器，直接IP或域名访问
2. 视口
视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口、理想视口
布局视口 layout viewport
一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。
视觉视口 visual viewport
字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。
我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。
理想视口 ideal viewport
布局视口很大，视觉视口就是我们手机屏幕的宽度，不同的手机屏幕宽度又不一样，所以我们需要一个理想视口。
通过meta视口标签通知浏览器操作就可以实现：（布局视口 = 视觉视口 = 手机屏幕的宽度） = 理想视口，最后得到的就是我们想要的理想视口。
最标准的viewport设置：
视口宽度和设备保持一致：content="width=device-width
不允许用户自行缩放：user-scalable=no
视口的默认缩放比例1：initial-scale=1
最大允许的缩放比例1：maximum-scale=1
最小允许的缩放比例1：minimum-scale=1
也就是如下代码：
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1" />
3. 二倍图
什么是物理像素比？
物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的，这是厂商在出厂时就设置好了，比如苹果 6 是 750* 1334。我们开发时候的 1px 不是一定等于1个物理像素的，一个 px 的能显示的物理像素点的个数，称为物理像素比。
PC端和早前的手机屏幕/普通手机屏幕：1CSS像素= 1物理像素
lRetina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。
什么是二倍图？
我们需要一个50* 50像素（css像素）的图片，直接放到我们的iphone8 里面会放大2倍 100* 100 就会模糊。
我们采取的是 放一个 100* 100 图片，然后手动的把这个图片缩小为 50* 50 （css像素），这样就不会模糊了。
我们准备的图片比我们实际需要的大小大2倍，这种方式就是 2倍图。
对于一张 50px * 50px 的图片，在手机或 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊，在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题。
通常使用二倍图，但是现在还存在3倍图4倍图的情况，这个看实际开发公司需求。
/* 在 iphone8 下面 */
img {
/*原始图片100*100px*/
width: 50px;
height: 50px;
}
4. 移动端技术解决方案
移动端浏览器兼容问题
移动端浏览器基本以 webkit 内核为主，因此我们就考虑webkit兼容性问题，我们可以放心使用 H5 标签和 CSS3 样式，同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可。
移动端公共样式
reset.css 是一刀切，将所有的标签默认margin、padding重置为0，所有的默认样式，清空重置，格杀勿论，片甲不留，即使有些标签没有默认的值，即使有些标签用不到。
Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的 reset.css，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。
Normalize.css优点如下：
保护了有价值的浏览器默认值
react.css中所有元素样式被统一，没有个性，强行使得元素有相同的视觉效果，全部依赖于往后为元素单独设置的样式。Normalize.css保护了有价值的浏览器默认样式，跟不加Normalize.css样式的时候差别不大，但是消除了浏览器之间的差异，保证了各个浏览器兼容性。修复了浏览器自身bug
Normalize.css修复了常见的桌面端和移动端浏览器的bug。包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。拥有详细的文档
Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易地进行自己的测试。这个项目的目标是帮助人们了解浏览器默认是如何渲染元素的，同时也让人们很容易地明白如何改进浏览器渲染。不会让你的调试工具变的杂乱
使用 reset.css 最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链。在Normalize.css中就不会有这样的问题，因为在Normalize.css的准则中对多选择器的使用是非常谨慎的，仅会有目的地对目标元素设置样式。是模块化的
Normalize.css已经被拆分为多个相关却又独立的部分，这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到部分（比如表单的一般化）。
移动端公共样式，推荐使用Normalize.css。normalize vt. 使正常化，使规范化，使标准化
官网地址： http://necolas.github.io/normalize.css/
使用 CSS3 盒模型
- 传统模式宽度计算：盒子的宽度 = CSS中设置的width + padding + border。
- CSS3盒模型：盒子的宽度= CSS中设置的宽度width，里面包含了 padding 和 border。
移动端大量使用 CSS3 盒模型，也就是说，我们的CSS3中的盒模型， padding 和 border 不会撑大盒子了。
/*传统盒模型，不包含border，所以是content-box*/
box-sizing: content-box;
/*CSS3盒模型，包含了border，所以是border-box*/
box-sizing: border-box;
传统 or CSS3盒模型？
- 移动端可以全部 CSS3 盒模型
- PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性，我们就选择 CSS3 盒模型
移动端特殊样式
/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*a标签点击后，背景会高亮，我们需要清除 设置为transparent透明*/
-webkit-tap-highlight-color: transparent;
/*button在iOS移动端浏览器会有默认外观，去掉默认外观，加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;
/*img和a，禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }
移动端布局方案
① 单独制作移动端页面（主流）
移动端和 PC 端各一份代码，移动端布局方式如下：
- 百分比布局
- flex 伸缩布局
- flex+rem 布局
通常情况下，网址域名前面加 m(mobile) 可以打开移动端。也就是说，PC端和移动端为两套网站，pc端是pc端的样式，移动端再写一套，专门针对移动端适配的一套网站
京东pc端：
京东移动端：
② 响应式页面兼容移动端（其次）
移动端和 PC 端共用一份代码，响应式的布局移动端和 PC 端会响应式变化从而适应不同的屏幕大小。
- 媒体查询
- bootstarp
三星电子官网： www.samsung.com/cn/ ，通过判断屏幕宽度来改变样式，以适应不同终端。
响应式网站：即pc和移动端共用一套网站，只不过在不同屏幕下，样式会自动适配
缺点：制作麻烦，需要花很大精力去调兼容性问题
二. 移动端布局：传统百分比布局
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。百分比布局方式是移动web开发使用的比较常见的布局方式。
当然为了保护内容，百分比布局也有宽高限制：
- max-width 最大宽度，min-width 最小宽度
- max-height 最大高度，min-height 最小高度
百分比布局案例：京东移动端首页
访问地址：m.jd.com
方案：我们采取单独制作移动页面方案
技术：布局采取百分比布局
代码地址：京东移动端百分比布局
三. 移动端布局：flex布局（CSS3）
CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
1. 传统百分比布局和flex布局对比
传统百分比布局：
- 兼容性好，布局繁琐
flex布局：
- 操作方便，布局极其简单，移动端使用比较广泛
- pc端浏览器支持情况比较差
总结：如果是pc端页面布局，还是采用传统百分比布局，如果是移动端或者是不考虑兼容的pc则采用flex布局。
2. flex布局原理
采用 Flex 布局的元素，称为 Flex 容器（flexcontainer），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flexitem），简称"项目"。
- flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局（不管是块级元素还是行内元素）。
- 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
- flex 容器，默认宽度是 100%，高度由子盒子撑起来，一般我们不设置宽度，需要时会设置高度，并且 flex 布局没有外边距合并的问题。
- 如果父容器是 flex 布局，不管子容器是块级元素、行内元素、行内块元素，都可以直接设置宽高，不用进行盒子类型转换。
3. 父项常见属性
① flex-direction 设置主轴的方向（即项目的排列方向）
在 flex 布局中，是分为主轴和侧轴两个方向，默认主轴方向就是 x 轴方向，水平向右，默认侧轴方向就是 y 轴方向，水平向下。
主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的，flex-direction可能的值如下：
② justify-content 设置主轴上的子元素排列方式
justify-content 属性定义了项目在主轴上的对齐方式 (justify vt. 证明…是正当的，对齐)
注意：使用这个属性之前一定要确定好主轴是哪个
注意：flex-direction:row-reverse 和 justify-content:flex-end 区别
比如：默认排列是 1 2 3 4 空格 空格
设置flex-direction:row-reverse 是完全方向翻转，排列效果：空格 空格 4 3 2 1，盒子顺序改变了。
设置justify-content:flex-end 只是从尾部开始排列，排列效果：空格 空格 1 2 3 4，盒子顺序不变。
③ flex-wrap 设置是否换行
前面我们学了 white-space: nowrap; 强制一行显示文本。
wrap
v. 包; 裹(礼物等); 用…包裹(或包扎、覆盖等); 用…缠绕(或围紧); （使文字）换行;
n. (女用)披肩; 围巾; 包裹(或包装)材料; (拍摄电影时)完成拍摄; 墨西哥卷;
默认情况下，项目都排在一条线（又称”轴线”）上，flex布局中默认是不换行的，如果一行装不下会缩小子元素的宽度。设置 flex-wrap: wrap; 如果一行装不下会自动换行。
④ align-items 设置侧轴上的子元素排列方式（单行 ）
该属性是控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项（单行）的时候使用
设置拉伸stretch会自动拉伸，前提是没设置高度。（了解）
⑤ align-content 设置侧轴上的子元素的排列方式（多行）
设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况（多行），在单行下是没有效果的。
注意：align-items 和 align-content 区别
- align-items 适用于单行情况下，只有
flex-start、flex-end、center、stretch - align-content适应于换行（多行）的情况下（单行情况下无效），可以设置
flex-start、flex-end、center、stretch、space-around、space-between
总结：就是单行找 align-items 多行找 align-content。
⑥ flex-flow
flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。
flex-flow:row nowrap; /* 就是默认情况的意思，默认x轴为主轴，不换行 */
4. 子项常见属性
① flex 属性
子项目占的份数，如果不指定flex属性（比如设置了width），则不参与伸缩分配。
flex使用举例：
html结构：
<section>
<div></div>
<div></div>
<div></div>
</section>
css布局：
section {
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: 0 auto;
}
/* 第一个盒子固定宽度 */
section div:nth-child(1) {
/* 把固定宽度切掉之后就是flex占用的宽度 */
width: 100px;
height: 150px;
background-color: red;
}
/* 第二个盒子自由伸缩 */
section div:nth-child(2) {
/* 由于只有一个子盒子设置flex，所以是总的是1份，这个盒子占1份 */
flex: 1;
background-color: green;
}
/* 第三个盒子固定宽度 */
section div:nth-child(3) {
width: 100px;
height: 150px;
background-color: blue;
}
小技巧：在上面的京东移动端案例中，我们使用百分比布局，给左右设置宽高固定的两个盒子，中间的盒子宽度设置100%，然后把中间盒子设置左右margin值（如下），才实现上面这个效果，现在我们使用flex布局，轻松实现了这个效果。
② order 属性定义项目的排列顺序
定义弹性对象元素出现的顺序（如果元素不是弹性对象元素，则 order 不生效），数值越小，排列越靠前，默认为0。
使用 order 我们可以实现不改变 html 的结构，使用 css 改变盒子左右顺序。注意，和 z-index 不一样，z-index是层叠的效果，order是左右的顺序。
.item {
order: <number>;
}
案例：携程网首页
携程网链接：http://m.ctrip.com
- 技术选型
方案：我们采取单独制作移动页面方案
技术：布局采取flex布局
- 搭建相关文件夹
- 常见flex布局思路
代码地址：携程网flex布局
小技巧：
- 伪元素的使用情况：一般是一个带有文字的标签添加一个其他伪元素（一般是横/竖线、箭头、方框等），最好不要添加带有文字的div为伪元素。
- 最好不给父盒子设置宽度，让子元素撑开盒子，刚开始写代码的时候可以设置一个很大的高度，最后再删除。
