移动端基础

浏览器现状

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

手机屏幕现状

移动端设备屏幕尺寸非常多，碎片化严重

移动端调试技巧

• Chrome DevTools（谷歌浏览器）的模拟手机调试
• 搭建本地 web 服务器，手机和服务器一个局域网内，通过手机访问服务器

视口

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

• 布局视口 layout viewport
• 视觉视口 visual viewport
• 理想视口 ideal viewport

用理想视口布局

理想视口，对设备来讲，是最理想的视口尺寸

meta 视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

meta 视口标签

1
2

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

标准的 viewport 设置：

• 视口宽度和设备保持一致
• 视口的默认缩放比例 1.0
• 不允许用户自行缩放
• 最大允许的缩放比例 1.0
• 最小允许的缩放比例 1.0

二倍图

物理像素&物理像素比

物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。

我们开发时候的 1px不是一定等于1 个物理像素的

PC 端页面，1 个 px 等于 1 个物理像素的，但是移动端就不尽相同

一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比

多倍图

对于一张图片,在手机屏中打开，物理像素比会放大倍数，这样会造成图片模糊

在标准的 viewport 设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题

通常使用二倍图，还存在3倍图4倍图的情况

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

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

背景缩放 background-size

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

语法格式：background-size: 背景图片宽度 背景图片高度;

注意事项：

• 单位： 长度|百分比|cover|contain;
• cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
• contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容

二倍精灵图做法

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

移动端开发选择

移动端主流方案：

• 单独制作移动端页面（主流）
• 响应式页面兼容移动端（其次）

单独移动端页面

通常情况下，网址域名前面加 m(mobile) 可以打开移动端。

通过判断设备/user-agent，如果是移动设备打开，则跳到移动端页面。

响应式兼容 PC 移动端

通过判断屏幕宽度来改变样式，以适应不同终端。

制作麻烦，需要花很大精力去调兼容性问题

移动端技术解决方案

移动端浏览器

移动端浏览器基本以webkit内核为主，因此我们就考虑webkit兼容性问题

CSS 初始化 normalize.css

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

• Normalize.css：保护了有价值的默认值
• Normalize.css：修复了浏览器的 bug
• Normalize.css：是模块化的
• Normalize.css：拥有详细的文档

官网地址

CSS3 盒子模型 box-sizing

• 传统模式宽度计算：盒子的宽度 = CSS 中设置的 width + border + padding
• CSS3 盒子模型： 盒子的宽度 = CSS 中设置的宽度 width 里面包含了 border 和 padding

特殊样式

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/*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 布局
• rem 布局

流式布局（百分比布局）

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

flex 布局

传统布局&flex 布局

传统布局：

• 兼容性好
• 布局繁琐
• 局限性，不能再移动端很好的布局

flex 弹性布局：

• 操作方便，布局极为简单，移动端应用很广泛
• PC 端浏览器支持情况较差
• IE 11 或更低版本，不支持或仅部分支持

flex 布局原理

flex 是flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。

• 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
• 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex 布局
• 体验中 div 就是 flex 父容器
• 体验中 span 就是 子容器 flex 项目
• 子容器可以横向排列也可以纵向排列

flex 布局父元素常见属性

flex-direction

flex-direction属性决定主轴的方向（即项目的排列方向）

主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。

justify-content

justify-content属性定义了项目在主轴上的对齐方式

flex-wrap

flex-wrap设置子元素是否换行

align-items

align-items设置侧轴上的子元素排列方式（单行）

align-content

align-content设置侧轴上的子元素的排列方式（多行）

align-content 和 align-items 区别

• align-items 适用于单行情况下， 只有上对齐、下对齐、居中和 拉伸
• align-content 适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、 下对齐、居中、拉伸以及平均分配剩余空间等属性值。
• 总结就是单行找 align-items/多行找 align-content

flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性

1

flex-flow: row wrap;

flex 布局子项常见属性

flex

flex属性定义子项目分配剩余空间，用 flex 来表示占多少份数。

align-self

align-self 控制子项自己在侧轴上的排列方式

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于stretch。

order

order 属性定义项目的排列顺序

数值越小，排列越靠前，默认为 0