css界面尺寸的自适应------尺寸单位%

在项目工程实践中，特别是在移动端的界面设计中，尺寸是一个难题。

在写微信小程序的开发中，我深刻的体会到这一点，px|rpx是一个绝对长度的单位，无法做到对尺寸各异的移动端进行适应。除非你在页面渲染之前，就对移动端的尺寸信息获取，然后精确计算。这是一个较为复杂的方法，不建议使用。

然而，%是一个很好用的尺寸单位，它会相对屏幕的尺寸变化而做同比例的伸缩变化。

在使用%时有几个要注意的地方，

1.从根容器开始，你就要设置它的长宽百分比，一层一层的指定。如果父元素长宽百分比未指定，并且里面没有内容，那么子元素的长宽百分比是无效的，有可能坍缩为0。从而无法看见。

2.子元素的长宽百分比是相对于父元素的长宽百分比做相应的变化，子元素长宽是父容器的长宽做百分比的自适应。

3.还有比较好用的长度单位vh和vw。视窗宽度vw，1vw=视窗宽度的1%。视窗高度vh，1vh=视窗高度的1%。也是非常好用的长度单位。

希望文章对大家有所帮助。。。。。。。。