移动端前端适配之：CSS大小单位大全

作为一名前端开发人员，经常需要适配各种不同的设备，而不同设备的分辨率和屏幕尺寸也各不相同。为了让我们的页面在不同设备上都能正常显示，我们需要使用CSS大小单位来进行适配。

CSS大小单位主要分为两类：

• 绝对单位： px、pt、cm、mm、in。
• 相对单位： em、rem、%、vw、vh、vmin、vmax。

绝对单位

绝对单位是基于设备的物理尺寸来定义的，因此它们在不同的设备上会显示出不同的实际大小。例如，1px在iPhone 6上的实际大小与在iPad上的实际大小是不同的。

相对单位

相对单位是基于父元素的尺寸来定义的，因此它们在不同的设备上会显示出相同的相对大小。例如，1em在iPhone 6和iPad上的实际大小都是父元素字体大小的1倍。

在移动端前端开发中，我们通常使用相对单位来进行适配，因为相对单位可以保证我们的页面在不同设备上都能够正常显示。

以下是CSS大小单位的详细介绍：

• px（像素）： px是CSS中最常用的单位，它表示一个物理像素。在移动端开发中，px单位通常用于定义元素的字体大小、边框宽度、内边距和外边距等。
• pt（磅）： pt是印刷单位，1pt等于1/72英寸。在移动端开发中，pt单位通常用于定义字体的磅值。
• cm（厘米）： cm是公制单位，1cm等于10毫米。在移动端开发中，cm单位通常用于定义元素的宽度和高度。
• mm（毫米）： mm是公制单位，1mm等于1/10厘米。在移动端开发中，mm单位通常用于定义元素的边框宽度和内边距。
• in（英寸）： in是英制单位，1in等于2.54厘米。在移动端开发中，in单位通常用于定义元素的宽度和高度。

相对单位

• em： em是相对单位，它表示父元素字体大小的1倍。在移动端开发中，em单位通常用于定义元素的字体大小、边框宽度、内边距和外边距等。
• rem： rem是相对单位，它表示根元素（html元素）字体大小的1倍。在移动端开发中，rem单位通常用于定义元素的字体大小、边框宽度、内边距和外边距等。
• %： %是相对单位，它表示父元素宽度的1%。在移动端开发中，%单位通常用于定义元素的宽度、高度、边框宽度和内边距等。
• vw： vw是相对单位，它表示视窗宽度的1%。在移动端开发中，vw单位通常用于定义元素的宽度、高度、边框宽度和内边距等。
• vh： vh是相对单位，它表示视窗高度的1%。在移动端开发中，vh单位通常用于定义元素的高度、边框宽度和内边距等。
• vmin： vmin是相对单位，它表示视窗宽度和视窗高度中较小者的1%。在移动端开发中，vmin单位通常用于定义元素的宽度、高度、边框宽度和内边距等。
• vmax： vmax是相对单位，它表示视窗宽度和视窗高度中较大者的1%。在移动端开发中，vmax单位通常用于定义元素的宽度、高度、边框宽度和内边距等。

在移动端前端开发中，我们通常使用rem单位来进行适配，因为rem单位可以保证我们的页面在不同设备上都能够正常显示，而且不会出现字体大小过大或过小的现象。

总结

CSS大小单位有很多种，在移动端前端开发中，我们通常使用相对单位来进行适配，因为相对单位可以保证我们的页面在不同设备上都能够正常显示。