（一）移动端 Web 开发基础

一、移动 Web 开发基础概念

1. 像素

(1) 分辨率

• 1798 x 828 像素分辨率：
  横向有 828 个点，纵向有 1792 个点

(2) 物理像素

• 物理像素（physical pixel），也可以叫做设备像素（dp：device pixel）
• 实际开发中不会以物理像素为准

(3) CSS 像素

• CSS 像素，也可以叫做逻辑像素（logical pixel）、设备独立像素（dip：device independent pixel）
• 是实际开发中使用的像素

.box {
   
	width: 200px;
	height: 200px;
}	

(4) 设备像素比

• 设备像素比（dpr：device pixel ratio）
• dpr = 设备像素 / CSS 像素（缩放比是 1 的情况下）
  dpr = 2 表示 1 个 CSS 像素用 2x2 个设备像素来绘制
  

(5) 标清屏和高清屏

(6) 缩放

• 缩放改变的是 CSS 像素的大小
• 缩放——放大
• 缩放——缩小

(7) PPI / DPI

• PPI：Pixels Per Inch
• DPI：Dots Per Inch
• 每英寸的物理像素点

2. 视口 viewport

• 设置视口：

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

• 获取视口宽度：

<script>
	console.log(window.innerWidth);
	console.log(document.documentElement.clientWidth);
	console.log(document.documentElement.getBoundingClientRect().width);

	var viewWidth = document.documentElement.clientWidth || window.innerWidth;

	// 兼容性问题，不要用
	// console.log(screen.width);

	// dpr
	console.log(window.devicePixelRatio);
</script>

二、移动 Web 开发基础知识

1. box-sizing

box-sizing 的两个值：

• content-box
  盒模型宽 / 高 = width / height + padding + border
  （向外扩张）
• border-box
  盒模型宽 / 高 = width / height
  （向内压缩）

2. 图标字体

• 图标字体库：iconfont-阿里巴巴矢量图标库
• 引入方式：<i class="iconfont icon-scan"></i>

3. flex 布局

(1) 什么是 flex 布局

• Flex 是 Flexible Box 的缩写，意为"灵活的盒子"或"弹性的盒子"，所以 flex 布局一般也叫作"弹性布局"

(2) flex 布局的基本概念

• flex 容器（flex container）:
  采用 flex 布局的元素，称为 flex 容器

.box {
   
	display: flex | inline-flex;
}

• flex 项目（flex item）:
  flex 容器的所有子元素自动成为容器成员，称为 flex 项目
  （只是子元素成为容器成员，孙子元素等不会成为容器成员）

• 项目默认沿主轴（main axis）排列

(3) flex 容器的属性

• display 属性
  display 属性决定是否使用flex布局
  flex：将对象作为弹性伸缩盒显示
  inline-flex：将对象作为内联块级弹性伸缩盒显示

.box {
   
	display: flex | inline-flex;
}

• flex-direction 属性
  flex-direction 属性决定主轴的方向（即项目的排列方向）
  ① row（默认值）：主轴为水平方向，起点在左端
  ② row-reverse：主轴为水平方向，起点在右端
  ③ column：主轴为垂直方向，起点在上沿
  ④ column-reverse：主轴为垂直方向，起点在下沿

.box {
   
	flex-direction: row | row-reverse | column | column-reverse;
}

• flex-wrap 属性
  默认情况下，项目都排在一条线（又称 “轴线” ）上
  flex-wrap 属性定义，如果一条轴线排不下，如何换行
  ① nowrap（默认）：不换行
  ② wrap：换行，第一行在上方
  ③ wrap-reverse：换行，第一行在下方

.box{
   
	flex-wrap: nowrap | wrap | wrap-reverse;
}

• flex-flow 属性
  flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap

.box {
   
	flex-flow: <flex-direction>; || <flex-wrap>;
}

• justify-content 属性
  justify-content 属性定义了项目在主轴上的对齐方式
  ① flex-start（默认值）：左对齐
  ② flex-end：右对齐
  ③ center： 居中
  ④ space-between：两端对齐，项目之间的间隔都相等（项目与边框之间没有间隔）
  ⑤ space-around：每个项目两侧的间隔相等；所以，项目之间的间隔比项目与边框的间隔大一倍

.box {
   
	justify-content: flex-start | flex-end | center | space-between | space-around;
}

• align-items 属性
  align-items 属性定义项目在交叉轴上如何对齐
  ① flex-start：交叉轴的起点对齐
  ② flex-end：交叉轴的终点对齐
  ③ center：交叉轴的中点对齐
  ④ baseline: 项目的第一行文字的基线对齐
  ⑤ stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

<