移动端布局
移动端基础
移动端浏览器现状
移动端起步较晚，基本以webkit为主，兼容移动端主流浏览器，处理Webkit内核即可，可以放心使用H5标签和CSS3样式
移动端屏幕现状
- 屏幕尺寸多样、分辨率多样，碎片化严重
- 作为开发者无需过多关注分辨率，因为我们使用的尺寸单位是
px
移动端调试方法
- Chrome DevTools的模拟移动端调试
- 搭建本地web服务其，手机和服务器在一个局域网内，通过手机访问服务器
- 使用外网服务器，直接IP或域名访问
视口
视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口
布局视口 layout viewport
布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。，布局视口的默认宽度有可能是768px、980px或1024px等，这个宽度并不适合在手机屏幕中展示。移动端浏览器之所以采用这样的默认设置，是为了解决早期的PC端页面在手机上显示的问题。
视觉视口 visual viewport
视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。当我们在手机中缩放网页的时候，操作的是视觉视口，而布局视口仍然保持原来的宽度
理想视口 ideal viewport
理想视口是指对设备来讲最理想的视口尺寸。在理想视口中，布局视口的大小和屏幕宽度是一致的，可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度。在开发中，为了实现理想视口，需要给移动端页面添加标签配置视口，通知浏览器来进行处理，使得布局视口的宽度与理想视口的宽度一致
meta视口标签
| 属性 | 说明 |
|---|---|
| width | viewport的宽度，可以设置为device-width特殊值 |
| initial-scale | 初始缩放比，大于0的数字 |
| maximum-scale | 最大缩放比，大于0的数字 |
| minimum-scale | 最小缩放比，大于0的数字 |
| user-scalable | 用户是否可缩放，yes or no，1 or 0 |
// 以下为最标准的viewport设置
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
二倍图
物理像素和物理像素比
-
物理像素指的是屏幕显示的最小颗粒，是物理真实存在的（分辨率）。做开发时候的1px 不一定等于1个物理像素
-
物理像素比即1个px的能显示的物理像素点的个数
lRetina（视网膜屏幕）与多倍图
-
lRetina：一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。对于一张 50px * 50px 的图片,在手机或 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊。
-
**解决方案：**在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题
-
背景缩放
background-size：该属性规定背景图像的尺寸
background-size: 背景图片宽度 背景图片高度;
单位：长度、百分比、cover、contain
cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域（高度宽度等比拉伸，覆盖完全覆盖区域）contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域（高度、宽度等比拉伸，可能存在空白区域）
移动开发选择和技术解决方案
移动端开发选择
- 单独制作移动端页面（主流）
- 京东商城
- 淘宝
- 苏宁易购
- 响应式页面兼容移动端：即pc和移动端共用一套网站，只不过在不同屏幕下，样式会自动适配，制作麻烦需要话费大量尽力调兼容性问题
- 三星手机官网
移动端技术解决方案
-
兼容性问题：只需考虑webkit兼容性问题，可以大胆使用H5和CSS3样式，浏览器的私有前缀我们只需要考虑添加 webkit 即可
-
移动端公共样式：移动端CSS 初始化推荐使用 normalize.css
- 保护了有价值的默认值
- 修复了浏览器的bug
- 是模块化的
- 拥有详细的文档
-
CSS3盒子模型
box-sizing- 传统模式宽度计算：盒子的宽度 = CSS中设置的
width+border+padding - CSS3盒子模型：盒子的宽度= CSS中设置的宽度
width里面包含了border和padding
- 传统模式宽度计算：盒子的宽度 = CSS中设置的
/*CSS3盒子模型*/
box-sizing: border-box;
/*传统盒子模型*/
box-sizing: content-box;
- 移动端特殊样式
/*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; }
常用移动端页面布局
常用布局
- 移动端单独制作页面
- 流式布局（百分比布局）
- flex弹性布局（推荐）
- less + rem + 媒体查询布局
- 混合布局
- 响应式页面布局
- 媒体查询
- bootstrap
流式布局
流式布局就是百分比布局，也称非固定像素布局。通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
**案例：**京东移动端首页
flex布局
什么是flex布局
即flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局，又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局 。当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。采用 Flex 布局的元素，称为Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flexitem），简称“项目”
父项常见属性
| 属性 | 说明 |
|---|---|
flex-direction | 设置主轴方向 |
justify-content | 设置主轴上的子元素排列方式 |
flex-wrap | 设置子元素是否换行 |
align-content | 设置侧轴上的子元素的排列方式（多行） |
align-items | 设置侧轴上的子元素排列方式（单行） |
flex-flow | 复合属性，相当于同时设置了 flex-direction 和 flex-wrap |
flex-direction
在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有 ： 行和列、x 轴和y 轴，默认主轴方向就是 x 轴方向，水平向右，默认侧轴方向就是 y 轴方向，水平向下
| 属性值 | 说明 |
|---|---|
row | 默认值，从左到右 |
row-reverse | 从右到左 |
column | 从上到下 |
column-reverse | 从下到上 |
justify-content
设置元素主轴排列方式
| 属性值 | 说明 |
|---|---|
flex-start | 默认值，从头部开始排列 |
flex-end | 从尾部开始排列 |
center | 在主轴居中对齐 |
space-around | 平分剩余空间，每个盒子margin-left和margin-right相等 |
space-between | 先两边贴边，再平分剩余空间 |
flex-wrap
设置是否换行
| 属性值 | 描述 |
|---|---|
nowrap | 默认值，不换行，装不下会缩小子元素宽度放到父盒子中 |
wrap | 换行 |
align-items
设置侧轴子元素排列方式（单行）
| 属性值 | 描述 |
|---|---|
flex-start | 默认值，从头部开始 |
flex-end | 从尾部开始 |
center | 居中显示 |
stretch | 拉伸，不能有高度/宽度 |
align-content
设置侧轴子元素排列方式，并且只能用于出现换行的情况（多行），在单行下是无效的
| 属性值 | 描述 |
|---|---|
flex-start | 默认值，从侧轴头部开始排列 |
flex-end | 从侧轴尾部开始 |
center | 再侧轴居中显示 |
space-around | 子项在侧轴平分剩余空间 |
space-between | 子项在侧轴两头先贴边，再平分剩余空间 |
stretch | 设置子项元素高度平分父元素高度 |
align-content 和align-items区别：
align-items适用于单行情况下， 只有上对齐、下对齐、居中和拉伸align-content适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值- 总结：单行找
align-items，多行找align-content
flex-flow
/* flex-direction 和 flex-wrap 属性的复合属性 */
flex-flow:row wrap;
子项常见属性
| 属性 | 描述 |
|---|---|
flex | 子项占的份数 |
align-self | 控制子项自己在侧轴的排列方式 |
order | 属性定义子项的排列顺序（前后顺序） |
flex属性
分配剩余空间
/* flex 属性定义子项目分配剩余空间，用flex来表示占多少份数 */
.item {
flex: 2; /* 默认值 0 */
}
align-self
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。
span:nth-child(2) {
/* 设置自己在侧轴上的排列方式 */
align-self: flex-end;
}
order
数值越小，排列越靠前，默认为0，注意不是z-index
.item {
order: 2;
}
rem布局
rem单位
rem即root em，是一个相对单位，类似于em，em是父元素字体大小，不同的是rem的基准是根元素——html元素的字体大小。比如根元素（html）设置font-size=12px;非根元素设置width: 2rem; 则换成px表示就是24px。使用rem可以很好来控制整个页面的元素大小
媒体查询
什么是媒体查询
媒体查询（Media Query）是CSS3新语法。
- 使用 @media查询，可以针对不同的媒体类型定义不同的样式
- @media 可以针对不同的屏幕尺寸设置不同的样式
- 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
媒体查询语法规范
- 用 @media开头 注意@符号
- mediatype 媒体类型
- 关键字 and not only
- media feature 媒体特性必须有小括号包含
@media mediatype and|not|only (media feature) {
/* CSS-Code; */
}
mediatype
将不同的终端设备划分成不同的类型，称为媒体类型
| 值 | 描述 |
|---|---|
all | 用于所有设备 |
print | 用于打印机和打印预览 |
screen | 用于电脑屏幕、平板电脑、智能手机等 |
关键字
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件
| 值 | 描述 |
|---|---|
and | 可以将多个媒体特性连接到一起，相当于“且”的意思 |
not | 排除某个媒体类型，相当于“非”的意思，可以省略 |
all | 指定某个特定的媒体类型，可以省略 |
媒体特性
每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。注意它们要加小括号包含
| 值 | 描述 |
|---|---|
width | 定义输出设备中页面可见区域的宽度 |
min-width | 定义输出设备中页面最小可见区域宽度 |
max-width | 定义输出设备中页面最大可见区域宽度 |
/* 在屏幕上 并且 最大宽度是800px(宽度小于等于800) 时body为粉色，注意时包含800px的 */
@media screen and (max-width: 800px) {
body {
background-color: pink;
}
}
/* 查询时先会执行上面的，下面的这句话会覆盖它 */
/* 在屏幕上 并且 最大宽度是500px(宽度小于500) 时body为蓝色 */
@media screen and (max-width: 500px) {
body {
background-color: blue;
}
}
媒体查询书写规范
为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写，我们通常从小到大来写，这样代码更简洁
rem适配方案
让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。
两种适配方案
-
less + rem + 媒体查询
①假设设计稿是750px
②假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）
③每一份作为html字体大小，这里就是50px
④那么在320px设备的时候，字体大小为320/15就是 21.33px
⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的
⑥比如我们以750为标准设计稿
⑦一个100像素的页面元素在 750屏幕下，就是 100/ 50 转换为rem是2rem*2rem，高宽比例是1比1
⑧320屏幕下，html字体大小为21.33，则 2rem= 42.66px 此时宽和高都是 42.66px，但是宽和高的比例还是 1比1
⑨但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果
总结：
①最后的公式：页面元素的rem值 = 页面元素值（px）/ （屏幕宽度 / 划分的份数）
②屏幕宽度/划分的份数就是 html元素
font-size的大小③或者：页面元素的rem值 = 页面元素值（px） / html元素
font-size字体大小 -
flexible.js
①手机淘宝团队出的简洁高效 移动端适配库，因为里面js做了处理，无需再写各种媒体查询条件，它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。
②我们只需确定好当前设备的html元素文字大小就可以了，剩余的，让flexible.js来去算
比如当前设计稿是 750px， 那么我们只需要把 html元素文字大小设置为75px（750px / 10）就可以了，
里面页面元素rem值： 页面元素的px 值 / 75
github地址：https://github.com/amfe/lib-flexible
总结：
因为flexible是默认将屏幕分为10等分，但是当屏幕大于750的时候希望不要再去重置html元素字体了
所以要自己通过媒体查询设置一下，并且要把权重提到最高
响应式布局
响应式布局开发原理
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。设备划分情况如下：
- 小于768的为超小屏幕（手机）
- 768~992之间的为小屏设备（平板）
- 992~1200的中等屏幕（桌面显示器）
- 大于1200的宽屏设备（大桌面显示器）
响应式布局容器
响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。父容器版心的尺寸划分如下：
- 超小屏幕（手机，小于 768px）：设置宽度为 100%
- 小屏幕（平板，大于等于 768px）：设置宽度为 750px
- 中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
- 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px
也可以根据实际情况需要自定义划分
布局和样式的设置，从而适配不同设备的目的。设备划分情况如下：
- 小于768的为超小屏幕（手机）
- 768~992之间的为小屏设备（平板）
- 992~1200的中等屏幕（桌面显示器）
- 大于1200的宽屏设备（大桌面显示器）
响应式布局容器
响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。父容器版心的尺寸划分如下：
- 超小屏幕（手机，小于 768px）：设置宽度为 100%
- 小屏幕（平板，大于等于 768px）：设置宽度为 750px
- 中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
- 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px
也可以根据实际情况需要自定义划分