[分享]css做移动端页面单位

CSS中的单位有很多种，但在移动端的页面设计中，我们通常使用以下三种单位。

1. px

.box{
    width: 320px;
    height: 200px;
    font-size: 16px;
} 

px是最常用的单位，它基于设备的像素，每个像素都是屏幕上的最小单位。在移动端中，一些小的组件，如按钮、圆角矩形等，都可以使用px单位快速实现。

2. rem

html{
    font-size: 16px;
}
.box{
    width: 20rem;
    height: 12rem;
    font-size: 1rem;
} 

rem是em的一种特殊写法，它是相对于html元素的字体大小而言的。在移动端中，我们一般将html的font-size设置为16px，这样我们可以根据设计稿中的px值除以16，得到相应的rem值。在设计中，我们经常使用rem单位，因为它可以实现页面的快速缩放，同时也可以保证文本的可读性。

3. vw/vh

.box{
    width: 50vw;
    height: 50vh;
} 

vw和vh是相对于视口宽度和高度的单位，在移动端开发中也经常使用。vw表示视口宽度的1/100，vh表示视口高度的1/100。使用vw和vh可以实现页面元素的响应式布局，比如页面分成两栏，可以设置一栏的宽度为50vw，另一栏的宽度为50vw即可。