移动端
一、移动端基础
1.浏览器现状
- 国内的浏览器都是根据Webkit修改过来的内核，国内尚未自主研发内核
- 所以，兼容移动端主流浏览器，处理Webkit浏览器即可。
2.手机屏幕现状
- 屏幕尺寸非常多，碎片化严重
- 分辨率也非常多
3.视口 viewport
视口就是浏览器显示内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口
3.1 布局视口 layout viewport
手机直接显示pc网页，就是元素很小，一般默认可以通过手动缩放网页。
3.2 视觉视口 visual viewpore
- 字面意思，他是用户正在看的网站的区域。
- 我们可以通过缩放去操作视觉视口，但是不会影响布局视口，布局视口仍然保持原来的宽度。
3.3 理想视口 ideal viewport
- 为了使网站在移动端有最理想的浏览和阅读宽度而定
- 理想视口，对设备来讲，是最理想的视口尺寸
- 需要手动添加meta视口标签通知浏览器操作
- meta视口标签的只要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就有多宽。
3.4 meta视口标签
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</meta>
| 属性 | 描述 |
|---|---|
| width | 宽度设置的是viewport宽度，可以设置device-width的特殊值 |
| initial-scale | 初始缩放比，大于0的数字 |
| maximum-scale | 最大缩放比，大于0的数字 |
| minimum-scale | 最小缩放比，大于0的数字 |
| user-scalable | 用户是否可以缩放，yes或者no（1或0） |
4.二倍图
4.1 物理像素和物理像素比
-
物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出场时就设置好了
-
我们开发时候的1px不是一定等于1物理像素的
- pc端页面，1px等于1物理像素，但是移动端就不尽相同
-
1px能显示的物理像素点的个数，称为物理像素比或者屏幕像素比
其实早期的手机屏幕的物理像素比就是1，直到视网膜屏幕技术的出现。Retina（视网膜屏幕）是一种显示计数，可以将更多的物理像素压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度
4.2 二倍图
- 对于一张50*50px的图片，在手机retna屏中打开，按照物理像素比会放大倍数，造成图片模糊
- 在标准的viewport设置中，使用倍图来提高拖质量，解决在高清设备中的模糊问题
- 通常使用二倍图，看实际需求
- 背景图片 注意缩放问题
- 所以，我们准备一个图片比我们实际需要的大2倍，再手动缩小2倍（width和height），这种方式就是二倍图
4.3 背景缩放 background-size
background-size： 背景图片宽度 背景图片高度；
- 只写一个参数，肯定是宽度，高度被省略，会等比缩放
- 里面的单位可以跟百分比，相对与父盒子
- 单位： 长度|百分比|cover|contain
- cover把背景图像扩展至足够大，使背景图像完全覆盖背景区域（恰好能盖住的最小缩放，可能导致背景图片显示不全）
- contain把图像扩展至最大尺寸，使宽度和高度完全适应内容区域（背景图片不超出背景区域的最大缩放，可能会有空白区域）
4.4 背景二倍图以及多倍切图
背景二倍图：与普通的二倍图类似，准备一个是实际所需图片的二倍大的图片放在背景区域，再用background-size等比例缩小2倍就行了
多倍切图：cutter-man
5.移动端开发选择
5.1 移动端主流方案
-
单独制作移动端页面（主流）
- 通常情况下，网址域名前面加个m（mobile）可以打开移动端。通过判断设备，如果是移动设备打开，则 跳到移动端页面。
-
响应式页面兼容移动端（其次）
- 通过判断屏幕宽度来改编样式，响应式兼容不同终端。
- 缺点：制作麻烦，需要花费大量精力取调兼容新问题。
6. 移动端技术解决方案
6.1移动端浏览器
- 移动端浏览器基本以 webkit 内核为主，因此我们就考虑 webkit 兼容性问题。
- 我们可以放心使用 H5 和 CSS3 样式。
- 同时我们浏览器的私有前缀，只需要考虑加上 webkit 就行。
6.2 CSS初始化
移动端初始化推荐使用 normalize.css，优点：
- 保护了有价值的默认值
- 修复了浏览器的bug
- 是模块化的
- 拥有详细的文档
官网：necolas.github.io/normalize.c…
6.3 特殊样式
/* CSS3盒子模型 */
box-sizing: border-box;
-webkit-box-sizing: border-box;
/* 点击高亮需要清除，设置为 transparent 完全透明 */
a {
-webkit-tap-highlight-color:transparent;
}
/* 在移动端默认外观在ios上加上这个属性才能给按钮和输入框自定义样式 */
input {
-webkit-appearance: none;
}
/* 禁用长按页面时弹出的菜单 */
img, a {-webkit-touch-callout: none;}
7.移动端技术选型
7.1 单独制作移动端页面（主流）
- 流式布局（百分比布局）
- flex 弹性布局（强烈推荐）
- less + rem + 媒体查询布局
- 混合布局
7.2 响应式页面兼容移动端（其次）
- 媒体查询
- bootstrap
二、流式布局（百分比布局）
三、flex弹性布局
2.1 传统布局与flex布局
传统布局：
- 兼容性好
- 布局繁琐
- 局限性，不能再移动端很好的布局
flex 弹性布局
- 操作方便，布局简单，移动端应用很广泛
- PC端浏览器支持情况差
- IE11或更低版本，不支持或部分支持
建议：
- 若是PC端布局，建议传统布局。
- 若是移动端布局或者不考虑兼容性的PC端布局，还是使用flex弹性布局。
2.2 flex布局原理
flex 是 flexible Box 的缩写，意为 “弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
- 为父盒子设为
flex布局后，子元素的float、clear、vertical-align属性将失效。 - 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex 布局
采用 Flex 布局的元素，称为 Flex容器（flex container），简称 “容器”。它的所有子元素自动成为容器成员，称为 Flex项目（flex item），简称 “项目”。
- flex项目本身也可以成为容器，称为子容器。则上一级则称为父容器。
- 子容器可以横向排列也可以纵向排列。
- 原理总结：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
3.常见的父项属性(主要)
flex-direction：设置主轴方向justify-content：设置主轴上的子元素排列方式flex-wrap：设置子元素是否换行align-content：设置侧轴上的子元素的排列方式（多行）align-items：设置侧轴上的子元素排列方式（单行）flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
3.1 设置主轴方向 flex-direction
在flex布局中，是分为主轴和侧轴两个方向，默认x轴 (行) 为主轴方向，y轴 (列) 为侧轴方向
| 属性值 | 说明 |
|---|---|
| row | 默认值，从左到右 |
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
3.2 设置主轴子元素排列方式 justify-content
- 注意是设置主轴上的排列方式
- 所以使用此属性之前一定要确定好主轴是哪个
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值，从头部开始，若主轴是x轴，则从左到右 |
| flex-end | 从尾部开始排列（但是盒子排列顺序还是沿主轴方向） |
| center | 在主轴剧中对齐（若主轴是x，则水平居中） |
| space-around | 平分剩余空间 |
| space-between | 先向两边贴紧，再平分剩余空间（重要） |
3.4 设置元素是否换行 flex-wrap
默认情况下，项目都排在一条线（又称轴线）上，如果装不开，会缩小子元素的宽度，强行挤在父元素里面
| 属性值 | 说明 |
|---|---|
| nowrap | 默认值，不换行 |
| wrap | 换行 |
| wrap-reverse | 反向换行（从左下角开始排） |
3.5 设置侧轴子元素排列方式（单行） align-items
该属性是控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项（单行）的时候使用。
| 属性值 | 说明 |
|---|---|
| flex-start | 从上到下 |
| flex-end | 从下到上 |
| center | 挤在一起（垂直居中） |
| strech | 拉伸（默认值） |
- stretch是拉伸，如果给子元素加了高度，效果和flex-start 一样，如果不加高度，stretch 就能让子元素和父盒子一样高
3.6 设置侧轴子元素排列方式（多行） align-content
align-content 设置侧轴上的子元素的排列方式（多行）
- 设置子项在侧轴上的排列方式并且 只能用于子项出现换行的情况（多行），在单行下是没有效果的。
- 多行是对主轴来说的
| 属性值 | 说明 |
|---|---|
| flex | 默认值，在侧轴的头部开始排列 |
| flex-end | 在侧轴的尾部开始排列 |
| center | 在侧轴中间显示 |
| space-around | 子项在侧轴平分剩余空间 |
| space-between | 子项在侧轴先分布在两头，再平分剩余空间 |
| strech | 设置子项元素高度任意平分父元素高度 |
align-items适用于单行情况下，只有上下对齐、居中和拉伸align-content适用于 换行（多行） 情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平分剩余空间等属性值
3.7 flex-flow
flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。
flex-flow: row wrap;
4. 常见的子项常见属性
4.1 分配剩余空间 flex
flex 属性定义子项目 分配剩余空间，用 flex 表示占多少份数。flex 的值可以是整数，可以是百分数。
小算法： 如果要平分一个盒子例如要平分一个盒子，则不给定子元素宽度（高度），然后给每一个子元素设置属性：flex: 1。
4.2 控制子项自己在侧轴上的排列方式 align-self
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 strech。
| 属性值 | 描述 |
|---|---|
auto | 默认值，继承父盒子的 align-items 值。 |
strech | 元素被拉伸以适应容器。 |
center | 元素位于容器的中心 |
flex-start | 元素位于容器的开头 |
flex-end | 元素位于容器的结尾 |
4.3 定义项目的排列顺序 order
数值越小，排列越靠前，默认为 0。
要把某个盒子提前只需要 order: -1;
