移动端布局演进

一，移动端-百分比布局

1、宽度百分比
我们写了一个宽度为800px的布局（通常我们把这种用px的布局叫做固定布局），但是当窗口宽度小于800px时，显然会截掉部分内容。为了让内容能够随着浏览器窗口的大小的变化全部显示，我们需要使用百分比来布局。此外，我还知道通过响应式中有名的media可以在某个分辨率节点改变布局。

     <div class="box" style="width: 800px;">
         <div class="item" style="width: 50%;"></div>
     </div>

百分比布局在于这个“基准参考值”，图中box所取都是800px，800px是item的父级块的宽度，所以，想要求出当前元素的百分比，他的基准参考值是父级块的宽度400px。
2、高度百分比
高度的百分比是相对于父级块的，但是父级块的高度需要指定，其子元素的高度百分比才会起作用，否则的话设置了百分比高度的子元素其高度会重置为auto。这也就是为什么我们习惯于同时给html和body设置height: 100%（占慢整个浏览器高度，注意 这里的html和body要以" , "隔开,省去逗号会以父子选择器 只给body设置），这样就可以让body内部的子级块使用百分比高度。

 html,body{
     height: 100%;
 }

3、图片（img）百分比
如果不为img指定宽高，默认情况下，img的宽高会是图像的原始尺寸。因此相对其父容器可能溢出，也可能不满。也不会跟着父容器的百分比发生变化。为了能让img跟着父容器的宽度而变化，我们常常给它设置如下样式：

在这之前img的父元素已经固定了width和height

image {    
   width: 100%; 
   height: auto;
}

4、背景图百分比

这里的容器已经固定了width和height，所以直接给背景图尺寸设置100%,就会占满整个容器

 background: url('') no-repeat center center;
 background-size: 100% 100%;

二，rem适配

如果html5要适应各种分辨率的移动设备，应该使用rem这样的尺寸单位，同时给出了一段针对各个分辨率范围在html上设置font-size的代码：

html{font-size:10px}

rem和em两者的差别

注意rem为单位的元素，其相对的基数是根元素（html)的font-size属性。

注意em为单位的元素，其相对的基数是离它最近的一个父元素的font-size属性。

@media screen and (min-width:250px) and (max-width:500px){
	html{
		font-size:10px
	}
}

@media screen and (min-width:500px) and (max-width:749px){
	html{
		font-size:20px
	}
}
@media screen and (min-width:750px){html{font-size:25px}}

把与元素尺寸有关的css，如width,height,line-height,margin,padding等都以rem作为单位，这样页面在不同设备下就能保持一致的网页布局。举例来说，网页有一个.item类，设置了width为3rem，该类在不同分辨率下对应的实际宽度如下：

250px <= device-width <= 500px，font-size:15px     --->  .item的width：45px

500px <= device-width <= 749px，font-size:20px     --->  .item的width：60px

750px <= device-width        ，font-size:25px      --->  .item的width：75px

三，移动端uni-app框架

1、rpx
rpx单位是uni-app中css的尺寸单位，运用于各种小程序，h5端和app,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

微信小程序也支持rem尺寸单位，rem和rpx的换算关系：rem: 规定屏幕宽度为20rem；1rem = (750/20)rpx 。

开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

uniapp 内置了 rpx 转 px 的方法，源码见下方

var px = uni.upx2px(100);

2、移动端常用的布局方式
flex 为"弹性布局"，用来为盒状模型提供最大的灵活性。

容器的属性

  flex-direction   主轴的方向
  flex-wrap        是否换行。
  justity-content  主轴方向的对其方式
  align-items侧轴方向的对其方式
  align-content   多轴线对其方式

flex-direction

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上。
column-reverse：主轴为垂直方向，起点在下。

flex-wrap

（1）nowrap（默认）：不换行。
（2）wrap：换行，第一行在上方。
（3）wrap-reverse：换行，第一行在下方

justity-content

flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍.

align-items

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

align-content

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
align-content在侧轴上执行样式的时候，会把默认的间距给合并。 对于单行子元素，该属性不起作用

容器的属性（添加在子项目上）

1 、 order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
2 、flex-grow
flex-grow 属性定义项目的放大比例，默认为0 即如果存在剩余空间，也不放大
如果flex-grow的属性值为1，则他们将等分剩余空间（如果有的话）。如果一个项目的flex-grow的值为2，其他的项目都为1，则前者占据的剩余空间将比其他的项目多一倍
3、 flex-rink
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

四，vw和vh的适配

vw、vh工作原理
此单位是根据浏览器的视口尺寸的百分比来定义的

vw：（viewpoint width的缩写）视觉视口宽度，1vw等于视窗宽度的1%

vh：（viewpoint height的缩写）视觉视口高度，1vh等于视窗高度的1%