微信小程序布局中的单位及使用：px、rem、rpx、vw、vh、n%

没接触过 JavaScript、CSS、HTML的小白直接开始接触微信小程序的开发，在了解了各个部分的作用以后，布局的时候就发现：怎么这么多单位？？？

px、rem、rpx、vw、vh、n%

为了不总是用得一脸懵逼，还是花点时间去好好归纳一下。

px：就是 Pixel 的缩写，就是指像素，图片采样的基本单位。

rem：把页面按比例分割达到自适应的效果。规定屏幕宽度为 20 rem，根据屏幕大小动态的设置 fontsize，来达到不同的分辨率下有一样的效果。

rpx：这个单位是微信小程序中特有的尺寸单位，也是把页面按比例分割达到自适应的效果。规定屏幕宽为750rpx，就是把屏幕宽度分成750部分，根据屏幕宽度进行自适应。可与 rem 换算：1 rem = (750/20) rpx =37.5 rpx

如在 iPhone6 上，屏幕宽度逻辑像素为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。所以开发微信小程序时用 iPhone6 作为视觉稿的标准,单位换算相对简单。

vw：视窗宽度，1vw等于视窗宽度的1%。

vh：视窗高度，1vh等于视窗高度的1%。

n%：父级容器的宽度百分百。

一般情况下，百分比+ rpx 就已经足够使用了，其他几个单位甚至可以几乎不用。

实际使用中的问题

在页面的wxss文件中设置父级容器 container 和容器里的组件 detail 时，如果我这样设置：

.container{background-color: blue; //container 背景色是蓝色height: 80%;            //我想让高度占屏幕的80%display: flex;flex-direction: column;align-items: center;justify-content: space-around;
}
.detail{background-color: yellow; //detail 背景色是黄色width: 100%;display: flex;flex-direction: column;
}

就会出现容器 container 占的比例不对，80%未生效的情况。

原因是 height: 80% 属性是子节点相对于父容器来说，此属性生效的必要条件是父容器必须具有具体的高度信息 。

而我这里容器 container 外面已经没有父容器了。解决办法有两个：

1、使用 vh 单位：

.container{background-color: blue; //container 背景色是蓝色height: 80vh;           //让高度为 80vhdisplay: flex;flex-direction: column;align-items: center;justify-content: space-around;
}
.detail{background-color: yellow; //detail 背景色是黄色width: 100%;display: flex;flex-direction: column;
}

2、在前面加上有高度信息的page{}

page{height: 100%; //这里用 100% 或者 100vh 都可
}
.container{background-color: blue; height: 80%;display: flex;flex-direction: column;align-items: center;justify-content: space-around;
}
.detail{background-color: yellow;width: 100%;display: flex;flex-direction: column;
}

效果如下：