H5C3进阶新篇章————移动端开发（基础篇）

---

前言

相对于PC端的页面布局，移动端代码会简洁一些，不过又多了一些需要我们掌握的属性，下面我就来跟你们分享我最近刚掌握的移动端开发基础知识。 移动端浏览器基本以webkit内核为主,因此我们就考虑webkit兼容性问题。 我们可以放心使用H5标签和CSS3样式。 同时我们浏览器的私有前缀我们只需要考虑添加webkit即可。

---

一、移动端常见二倍图做法

1.为什么要二倍图？

因为PC端和移动端物理像素点的不同，所以在移动端清晰的图片放到移动端就会变模糊，而二倍图可以解决这个问题。
物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的。比如苹果6\7\8是 750* 1334。
我们开发时候的1px不是一定等于1个物理像素
PC端页面, 1个px等于1个物理像素的,但是移动端就不尽相同
一个px能显示的物理像素点的个数,称为物理像素比或屏幕像素比
原因： Retina (视网膜屏幕)是一种显示技术,可以将把更多的物理像素点压缩至一块屏幕里,从而达到更高的分辨率,并提高屏幕显示的细腻程度。
所以在PC端一个10X10的图片放到移动端就变成了20X20，像素比为1：2

2.二倍图的使用

（1）原理：准备的图片要比开发尺寸大两倍/三倍/四倍，根据物理像素比，将图片进行缩放，然后到移动端再放大就是原图尺寸了，就不会出现模糊问题.
（2）常见用法——背景缩放：

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

单位: 长度|百分比| cover Icontain;

如果只写一个，那么一定是宽度，高度省略，等比例缩放；如果写百分比就是相对于父元素而言的。

cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。（图片比例不变，但是要注意，超出容器的部分可能会裁掉。）

contain:把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
（即等比缩放，按照某一边来覆盖显示区域，若区域大于图片的比例，会有白边，图片不会变形）
contain例子：如下图所示，因为宽度已扩展至最大尺寸，但高度还不够，所以底下会有白边

3.二倍图使用前后效果

我们将一个100X100的图片放到移动端,先将图片缩小到50X50，代码如下：

background: url(apple.jpg) no-repeat;
background-size: 50px 50px;

二、单独移动页面开发

移动端开发分 单独移动端页面开发和响应式兼容PC移动端开发，前者是PC端打开和移动端打开页面不一样而后者PC端和移动端页面一致，通过判断屏幕宽度来改变样式,以适应不同终端。今天我先分享单独移动页面开发中的流式布局和flex弹性布局

1.流式布局（百分比布局）

流式布局，就是百分比布局,也称非固定像素布局

通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,受固定像素的限制,内容向两侧填充。（一般宽度设置百分比，高度可以给固定值）

流式布局方式是移动web开发使用的比较常见的布局方式。

为了防止无限拉伸和缩小，我们可以给父盒子设置一个最大、最小宽度高度值，从而保证盒子在合理范围内：

max-width最大宽度( max-height最大高度)
min-width最小宽度( min-height最小高度)

代码如下（示例）：

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

2.flex弹性布局（推荐）

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

当我们为父盒子设为flex布局以后,元素的float， clear 和vertical-align属性将失效。

伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

采用Flex布局的元素,称为Flex容器( flex container) , 简称"容器"。它的所有子元素自动成为容器成员,称为Flex项目( flex item) , 简称"项目"。

子容器可以横向排列也可以纵向排列(通过一个属性来设置，下面会讲到)

总结flex布局原理:
就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式

（1） 常见父项属性

① flex-direction: 设置主轴的方向

属性值	含义
row	默认值 ，从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

② justify-content: 设置主轴上的子元素排列方式

属性值	含义
flex-start	默认值 ，从头部开始 （如果主轴是x轴，则从左到右）
flex-end	从尾部开始排列
center	在主轴居中对齐（如果主轴是x轴则水平居中）
space-around	平分剩余空间
space-between	先两边贴，再平分剩余空间（重要）

其中我分享一下space-between用法，代码如下：

.father {
   display: flex;
   width: 800px;
   height: 300px;
   background-color: pink;
   flex-direction: row;
   /*设置主轴是x轴*/
   justify-content: space-between;
}
.son {
	width: 150px;
	height: 100px;
	background-color: purple;
	}

效果如图所示：

这个属性相对于PC端而言就方便很多，只需要写一句代码，不需要给每个子盒子设置margin值，就可以实现两边贴边中间平均分配的效果。

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

属性值	含义
nowrap	默认值 ，不换行
wrap	换行

默认不换行时，会将父盒子中所有的子盒子都摆在一行内，如下图所示：

即使给每个子盒子设置了宽度，子盒子越多，每个子盒子的宽度就越小，如果想实现换行，将属性值改为wrap即可，会固定子盒子的宽度，会换行显示。

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

属性值	含义
flex-start	默认值 ，再侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
stretch	设置子项元素高度平分父元素高度

实现子盒子上下贴边显示，通过将主轴改为y轴，再使用space-between属性值即可，代码如下：

.father {
   display: flex;
   width: 800px;
   height: 300px;
   background-color: blue;
   flex-direction: column;
   /*设置主轴是y轴*/
   flex-wrap: wrap;
   /*换行显示*/
   align-content: space-between;
}
.son {
	width: 150px;
	height: 100px;
	background-color: orange;
	}

效果如下图所示：

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

属性值	含义
flex-start	默认值 ，从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
stretch	拉伸

多行居中和单行居中的区别：
多行居中：

单行居中：

只有为单行时，用单行居中才有效，否则无效，多行居中同理。

以上讲述的均为父项属性，切记加在父元素中！！！

（2） 常见子项属性

① flex 设置子项目占的份数

flex属性定义子项目分配剩余空间,用flex来表示占多少份数
一个父盒子里，装三个span，代码如下：

.father {
           display:flex;
           width: 60%;
           height: 150px;
           background-color: pink;
           margin: 100px auto; 
           }
.father span {
            flex: 1;
            /*每个孩子占一份*/
            }
.father span:nth-child(2) {
            flex: 2;
            /*第二个孩子占两份*/
            }

效果如下：

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

align-self属性允许单个项目有与其他项目不样的对挤方式,可覆盖align-items属性。
默认值为auto ,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
属性值与align-items中一样.

为父元素中第三个盒子设置与底部对齐样式：

   .father span:nth-child(3) { align-self: flex-end; }

效果如下：

③ order 定义子项的排列顺序

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

注意: 和 z-index不一样

例：如果想让第二个盒子跑到第一个盒子的位置，因为默认为0，设置第二个盒子 
order:-1;  则第二个盒子会跑到第一个.

子项属性切记写在子元素中！！！

---

以上就是今天我给大家分享的关于移动开发方面的基础知识，如有错误之处感谢指正~