移动端基础知识
屏幕尺寸
屏幕尺寸： 指的是屏幕对角线的长度，一般用英寸来度量。
分辨率
Ø物理分辨率是生产屏幕时就固定的，它是不可被改变的
Ø 逻辑分辨率是由软件（驱动）决定的，可以经过软件设置改变分辨率的比例大小
我们平时制作网页时参考的就是逻辑分辨率，以下是部分移动端主流设备分辨率的比例关系：
视口
视口：显示HTML网页的区域，用来约束HTML尺寸。
由于默认情况下，网页的宽度和逻辑分辨率是不同的(默认网页宽度是980px),可以使用meta标签设置视口宽度，制作适配不同设备宽度的网页。
viewport：视口
width=device-width：视口宽度 = 设备宽度
initial-scale=1.0：缩放1倍（不缩放）
二倍图
当设备像素比很大时，图片会被放大，而放大会让图片看起来模糊。为此，我们可以使用二倍图的方式来提高图片的清晰度。接下来就来讲解二倍图的概念和使用方法。
在实际开发中，当一个50 ×50像素（CSS像素）的图片直接放到iPhone 6/7/8设备中显示时，图片会被放大，变成原来的两倍（iPhone 6/7/8的设备像素比为2），即100 ×100。为了避免图片放大后模糊，我们可以预先制作一张100 ×100的图片，然后在网页中手动设置这个图片的样式，将图片的宽和高都设为50像素。这样，这张图片就会以它原本的像素（100 ×100）来显示，保证了图片的原有清晰度。
设计稿参考iPhone6/7/8，设备宽度375px产出设计稿。
二倍图设计稿尺寸：750px
使用PxCook打开750px的设计稿，设置以二倍图模式显示尺寸。
百分比布局
百分比布局， 也叫流式布局
效果： 宽度自适应，高度固定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
footer {
width: 100%;
height: 50px;
position: fixed;
left: 0;
bottom: 0;
background-color: aqua;
}
footer a {
float: left;
width: 20%;
/* 宽度设置使用百分比 */
height: 50px;
}
img {
width: 100%;
}
</style>
</head>
<body>
<footer>
<a href=""><img src="./1.png" alt=""></a>
<a href=""><img src="./2.png" alt=""></a>
<a href=""><img src="./3.png" alt=""></a>
<a href=""><img src="./4.png" alt=""></a>
<a href=""><img src="./5.png" alt=""></a>
</footer>
</body>
</html>
Flex布局
使用Flex布局模型灵活能够快速的开发网页。
在一般的网页布局中，让多个盒子横向排列都会使用浮动属性来操作，margin属性来调整间距，但经常需要的一点就是需要注意浮动盒子的脱标问题。
Flex布局/弹性布局：
Ø 是一种浏览器提倡的布局模型
Ø 布局网页更简单、灵活
Ø 避免浮动脱标的问题
作用：
Ø 基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
Ø Flex布局非常适合结构化布局
设置方式：
Ø >>>> 父元素添加 display: flex，子元素可以自动的挤压或拉伸
组成部分：
Ø 弹性容器
Ø 弹性盒子
Ø 主轴
Ø 侧轴 / 交叉轴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>flex组成</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 1000px;
height: 600px;
background: orange;
display: flex;
/*
弹性盒子：弹性容器的最近一级子元素(亲儿子子元素)
1.默认的宽度由内容所撑开，默认的高度为父元素的高度(侧轴方向默认是拉伸)；
2.没有块级，行内，行内块元素之分，统统都是弹性盒子(可以直接设置宽高，一行显示多个)；
3.默认不换行，宁愿牺牲自己的宽度，都不会自动换行
*/
/*
添加弹性布局 display:flex; df
弹性容器 display:flex;：
默认宽度和父元素宽度一样，默认的高度由内容所撑开
*/
}
.box div {
width: 100px;
height: 100px;
color: #fff;
font-size: 30px;
font-weight: 700;
text-align: center;
line-height: 100px;
background-color: #0a0;
border: 1px solid #fff;
}
.box span {
width: 100px;
height: 100px;
color: #fff;
font-size: 30px;
font-weight: 700;
text-align: center;
line-height: 100px;
background-color: #0a0;
border: 1px solid #fff;
}
a {
width: 100px;
height: 100px;
background-color: purple;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
主轴对齐方式
使用justify-content属性可以调节元素在主轴的对齐方式
Ø 在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>主轴对齐方式</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 1000px;
height: 600px;
background: orange;
display: flex;
/* flex-start 默认值，从父元素的左边开始显示 */
/* justify-content: flex-start; */
/* flex-end 让弹性盒子整体，显示在弹性容器的右侧 */
/* justify-content: flex-end; */
/* center 让弹性盒子整体，显示在弹性容器的中间 */
/* justify-content: center; */
/* space-around 让空白空间环绕在弹性盒子的两侧，第一个和最后一个弹性盒子离弹性容器的距离为弹性盒子与弹性盒子之间的距离的1/2 */
/* justify-content: space-around; */
/* space-between 让空白空间分布在弹性盒子与弹性盒子之间---第一个和最后一个弹性盒子离弹性容器的距离为0 */
/* justify-content: space-between; */
/* space-evenly 弹性盒子离弹性容器之间的距离与弹性盒子与弹性盒子之间的距离相等 */
justify-content: space-evenly;
}
.box div {
width: 100px;
height: 100px;
color: #fff;
font-size: 30px;
font-weight: 700;
text-align: center;
line-height: 100px;
background-color: #0a0;
border: 1px solid #fff;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
侧轴对齐方式
使用align-items属性可以调节元素在侧轴的对齐方式
修改侧轴对齐方式的属性:
Ø align-items（添加到弹性容器）
Ø align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>侧轴对齐方式</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
/* 添加弹性布局 df */
/* 侧轴对齐方式 ai */
display: flex;
/* 默认值 flex-start 从起点开始排列 */
/* align-items: flex-start; */
/* flex-end 从终点排列 */
/* align-items: flex-end; */
/* center 垂直居中 */
align-items: center;
/* 默认值 stretch 垂直拉伸：沿着侧轴(垂直)方向拉伸弹性盒子的高度直到父元素一样高 */
/* align-items: stretch; */
width: 1000px;
height: 600px;
background: orange;
}
.box div {
width: 100px;
height: 100px;
color: #fff;
font-size: 30px;
font-weight: 700;
text-align: center;
line-height: 100px;
background-color: #0a0;
border: 1px solid #fff;
}
.box .hang {
/*
align-self是给弹性盒子添加
align-self的属性值和ai是一样的，控制某个弹性盒子在侧轴方向排列
*/
align-self: flex-start;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div class="hang">航哥哥</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
伸缩比
使用flex属性可以修改弹性盒子伸缩比(添加在弹性盒子中)
属性:
Ø flex : 值;
取值分类:
Ø 数值(整数)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>flex伸缩比例</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
/* 添加弹性布局 df */
display: flex;
width: 1000px;
height: 600px;
background: orange;
}
.box div {
/* flex: 1; */
width: 200px;
height: 100px;
color: #fff;
font-size: 30px;
font-weight: 700;
text-align: center;
line-height: 100px;
background-color: #0a0;
border: 1px solid #fff;
}
.box .san {
flex: 1;
}
/*
伸缩比：flex 给弹性盒子添加
1.所有的弹性盒子都添加相同的flex值，均分弹性容器的宽度；如果flex值不同，根据比例进行分配
2.其他的盒子宽度固定，只有一个盒子设置了flex:1 --- 占据父元素剩余的宽度
*/
/* 需求：张三吃一份，李四吃两份，王五吃三份 */
.box .li {
flex: 1;
}
.box .san {
flex: 2;
}
.box .zh {
flex: 3;
}
/*
总结：
弹性容器设置的属性：df，jc，ai
弹性盒子设置的属性：align-self，flex
*/
</style>
</head>
<body>
<div class="box">
<div class="li">张三</div>
<div class="san">李四</div>
<div class="zh">王五</div>
</div>
</body>
</html>
居中方式
常用定位盒子水平垂直居中方式是，设置子绝父相后，先水平方向和垂直方向移动父元素的50%大小距离，再减去盒子本身大小的一半。
flex布局是通过设置在设置了display：flex;的父盒子中设置justify-content: center;和align-items: center;来实现水平垂直居中的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
display: flex;
/* 水平居中 主轴居中 jcc */
justify-content: center;
/* 垂直居中 侧轴居中 aic */
align-items: center;
/* 能不能用定位？可以 */
/* 能不能用tf转换？可以 */
/*
浮动不会和df一起使用的
基础班学的属性，除了浮动不能配合df使用以外，其他的都可以
*/
/* position: relative; */
width: 400px;
height: 400px;
background: #6cf;
}
.son {
width: 120px;
height: 120px;
background-color: #0a0;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
</html>
