目录

• 移动端布局
• • 移动端基础
  • • 移动端浏览器现状
    • 移动端屏幕现状
    • 移动端调试方法
  • 视口
  • • 布局视口 layout viewport
    • 视觉视口 visual viewport
    • 理想视口 ideal viewport
    • meta视口标签
  • 二倍图
  • • 物理像素和物理像素比
    • lRetina（视网膜屏幕）与多倍图
  • 移动开发选择和技术解决方案
  • • 移动端开发选择
    • 移动端技术解决方案
  • 常用移动端页面布局
  • • 常用布局
    • 流式布局
    • flex布局
    • • 什么是flex布局
      • 父项常见属性
      • • flex-direction
        • justify-content
        • flex-wrap
        • align-items
        • align-content
        • flex-flow
      • 子项常见属性
      • • flex属性
        • align-self
        • order
  • rem布局
  • • rem单位
    • 媒体查询
    • • 什么是媒体查询
    • 媒体查询语法规范
    • • mediatype
      • 关键字
      • 媒体特性
      • 媒体查询书写规范
      • rem适配方案
      • • 两种适配方案
  • 响应式布局
  • • 响应式布局开发原理
    • 响应式布局容器
    • 响应式布局容器

移动端布局

移动端基础

移动端浏览器现状

移动端起步较晚，基本以webkit为主，兼容移动端主流浏览器，处理Webkit内核即可，可以放心使用H5标签和CSS3样式

移动端屏幕现状

1. 屏幕尺寸多样、分辨率多样，碎片化严重
2. 作为开发者无需过多关注分辨率，因为我们使用的尺寸单位是px

移动端调试方法

1. Chrome DevTools的模拟移动端调试
2. 搭建本地web服务其，手机和服务器在一个局域网内，通过手机访问服务器
3. 使用外网服务器，直接IP或域名访问

视口

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

布局视口 layout viewport

布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。，布局视口的默认宽度有可能是768px、980px或1024px等，这个宽度并不适合在手机屏幕中展示。移动端浏览器之所以采用这样的默认设置，是为了解决早期的PC端页面在手机上显示的问题。

视觉视口 visual viewport

视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。当我们在手机中缩放网页的时候，操作的是视觉视口，而布局视口仍然保持原来的宽度

理想视口 ideal viewport

理想视口是指对设备来讲最理想的视口尺寸。在理想视口中，布局视口的大小和屏幕宽度是一致的，可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度。在开发中，为了实现理想视口，需要给移动端页面添加标签配置视口，通知浏览器来进行处理，使得布局视口的宽度与理想视口的宽度一致

meta视口标签

// 以下为最标准的viewport设置
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

二倍图

物理像素和物理像素比

1. 物理像素指的是屏幕显示的最小颗粒，是物理真实存在的（分辨率）。做开发时候的1px 不一定等于1个物理像素

2. 物理像素比即1个px的能显示的物理像素点的个数

lRetina（视网膜屏幕）与多倍图

1. lRetina：一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。对于一张 50px * 50px 的图片,在手机或 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊。

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

3. 背景缩放background-size：该属性规定背景图像的尺寸

background-size: 背景图片宽度 背景图片高度;
单位：长度、百分比、cover、contain

• cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域（高度宽度等比拉伸，覆盖完全覆盖区域）
• contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域（高度、宽度等比拉伸，可能存在空白区域）

移动开发选择和技术解决方案

移动端开发选择

1. 单独制作移动端页面（主流）
   • 京东商城
   • 淘宝
   • 苏宁易购
2. 响应式页面兼容移动端：即pc和移动端共用一套网站，只不过在不同屏幕下，样式会自动适配，制作麻烦需要话费大量尽力调兼容性问题
   • 三星手机官网

移动端技术解决方案

1. 兼容性问题：只需考虑webkit兼容性问题，可以大胆使用H5和CSS3样式，浏览器的私有前缀我们只需要考虑添加 webkit 即可

2. 移动端公共样式：移动端CSS 初始化推荐使用 normalize.css

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

3. CSS3盒子模型 box-sizing

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

/*CSS3盒子模型*/
box-sizing: border-box;
/*传统盒子模型*/
box-sizing: content-box;

4. 移动端特殊样式

/*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; }

常用移动端页面布局

常用布局

1. 移动端单独制作页面
   • 流式布局（百分比布局）
   • flex弹性布局（推荐）
   • less + rem + 媒体查询布局
   • 混合布局
2. 响应式页面布局
   • 媒体查询
   • bootstrap

流式布局

流式布局就是百分比布局，也称非固定像素布局。通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

**案例：**京东移动端首页

flex布局

什么是flex布局

即flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局，又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局 。当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。采用 Flex 布局的元素，称为Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flexitem），简称“项目”

父项常见属性

flex-direction

在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有 ： 行和列、x 轴和y 轴，默认主轴方向就是 x 轴方向，水平向右，默认侧轴方向就是 y 轴方向，水平向下

justify-content

设置元素主轴排列方式

flex-wrap

设置是否换行

align-items

设置侧轴子元素排列方式（单行）

align-content

设置侧轴子元素排列方式，并且只能用于出现换行的情况（多行），在单行下是无效的

align-content 和align-items区别：

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

flex-flow

/* flex-direction 和 flex-wrap 属性的复合属性 */
flex-flow:row wrap;

子项常见属性

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

将不同的终端设备划分成不同的类型，称为媒体类型

关键字

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件

媒体特性

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。注意它们要加小括号包含

/* 在屏幕上 并且 最大宽度是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字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。

两种适配方案

1. 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字体大小

2. 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

也可以根据实际情况需要自定义划分