移动端布局&弹性布局

1.前置概念

1.1 理想视口

前缀：必须弄上去

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

1.2 因为视网膜屏的出现，所以电脑开发1px=手机屏幕2px

1.3 插入到手机的图片设计图要比显示的大一倍（例如：手机图片50px,设计稿100px）然后将设计稿缩小至50px

2.background-size参数：背景缩放

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

background-size: 背景图片宽度 背景图片高度;

单位： 长度|百分比|cover|contain;

cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。（可能切掉部分区域）

contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域 （可能有空白区域）

3.正式开发

1.CSS3盒模型

移动端开发随便用

div{
    
    box-sizing: border-box;
  
    width: 300px;
    height: 300px;
    background-color: #ccc;
    border: 20px solid pink;
}

CSS3盒模型：border-box

(显示width=border+pading+width)

传统盒模型：content-box

(显示width=width)

2.特殊样式

3.流式布局

max-width: 980px;  宽度上下限
min-width: 320px;

父盒子
section{
    width: 100%;
    max-width: 980px;
    min-width: 320px;
}

子盒子
section div{
    float: left;
    width: 50%;
    height: 400px;
}

4.body格式

body{
    width: 100%;
    max-width: 640px;
    min-width: 320px;
    margin: 0 auto;
    font-family: -apple-system, Helvetica, sans-serif;
    color: #666;
    line-height: 1.5;
}

5.二倍精灵图

1.等比例缩小

2.测量距离

3.缩小整个图

4.坐标移位

注意：顺序先移距离，再缩小大图

background:url("../images/jd-sprites.png") no-repeat -81px 0;
background-size: 200px;

6.固定定位

固定的盒子要给宽

.searcher{
    position: fixed;
    height: 44px;
    overflow: hidden;
    min-width: 320px;
    max-width: 640px;
    width: 100%;
}

4.流式布局总结

原理：

1.先给父盒子分百分比，再给子盒子100%或给适当高度

.app ul li:nth-child(2){
    width: 10%;
}
.app ul li:nth-child(2) img {
    height: 30px;
    vertical-align: middle;
}

2.或者也可以这样插入图片（作为背景插入）插入后修改大小

background: url("../images/s-btn.png") no-repeat;
background-size: 20px 18px;

图像img垂直居中：

vertical-align: middle;

5.flex布局基本语法

写在父盒子上（不会塌陷）

div{
    display: flex;
    background-color: purple;
}
span{
    height: 200px;
    width: 100px;
    background-color: pink;
    margin: 10px;
}

1.父盒子属性

1.flex-direction

flex-direction: column;
flex-direction: row;

2.justify-content

跟随主轴排列

3.flex-wrap

子元素超距后，是否换行，若装不开，缩小子元素宽度

flex-wrap: wrap;换行

4.align-item侧轴单行

align-items: center;居中

5.align-content多行侧轴排列

align-content: space-between;
align-content: center;
align-content: space-around;

6.flex-flow连写

flex-flow: row wrap;
           主轴  换行

2.子盒子属性

1.flex

剩余空间分配的份数（四分：2:2:1:1）

div span:nth-child(1){
    flex: 2;
}
div span:nth-child(2){
    flex: 2;
}
div span:nth-child(3){
    flex: 1;
}
div span:nth-child(4){
    flex: 1;
}

1.align-self改变侧轴某个子元素属性

div span:nth-child(8){
    align-self: center;
}

2.order

改变顺序，越小越靠前，不设置默认为0

div span:nth-child(3){
    order: -2;
}
div span:nth-child(4){
    order: -1;
}

6.flex布局开发总结

1.固定定位必须设置高度，且固定定位的width=100%是与网页相同，而不是父盒子，所以一般需要设置最大宽度和最小宽度

2.原理

运用盒子之间的父子关系，设置flex，进行各种等分，适合分块明显的页面。

多行等分记得换行flex-wrap：wrap；