本篇目录：
css3的新单位vw、vh、vmin、vmax应该如何使用
1、vh和vv：1vh等于1/100的视口高度①，1vw等于1/100的视口宽度。vmin和vmax：关于视口高度和宽度的最小值或最大值，vmin等于1/100的视口宽高中的最小值。应用场景：让一个元素始终在屏幕中可见。
2、vw = viewportWidth * 1/100； 1vh = viewportHeight * 1/100； 所以元素使用 “vw” “vh” 作为宽度和高度单位，即可以保证适配不同的设备。
3、rem：移动端布局，根据根节点字体大小，具体可参考淘宝移动端解决法案，根据设备dpr；em：类似rem，不过是根据父节点字体大小 vw，vh ：viewport height和viewport width。1vw就是viewport width的1%。
4、视口单位vw：1vw=视口宽度的1%，vh：1vh=视口高度的1%，vmax：vmax选取vw和vh中最大的那个，vmin：vmin选取vw和vh中最小的那个。6，rpx，是微信小程序中css的尺寸单位。
常见的CSS布局单位
CSS布局方式有很多，从远古时代的table（表格）布局--float（浮动）布局--position（定位）布局--flex（弹性）布局--grid（网格）布局（还未正式推出），下面咱们简单谈一谈各种布局的用法及其优缺点。
vm、vh、vmin、vmax是一种视窗单位，也是相对单位 。主要用于页面视口大小布局，相对于rem在页面布局上更加方便简单。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。
原生css布局的方式，float布局，也是最基础的方式。将aside向左浮动，固定好宽度。main向右浮动，注意固定好宽度是 100vw - 左侧边栏的宽度 ，注意高度是 100vh - 上下header和footer高度之和 。
css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。举个例子：浏览器宽度1200px， 1 vw = 1200px/100 = 12 px。
列全部属于css单位的是
cm：厘米(Centimeter)，绝对长度单位。
第一种：px px（像素）是CSS中最为常用的一种单位，传统上一个像素对应计算机屏幕上的一个点，对于高清屏则对应更多。第二种：百分比也较为常用。其中对font-size设置百分比值时，是以浏览器默认字体大小16px为参照计算的。
CSS表示长度属性值分为两类：相对单位和绝对单位。绝对单位就是固定的，有厘米（cm）、英寸（in）、英镑（pt）、pica（皮卡）等。
rem：相对单位，可理解为”root em”， 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。
不建议在屏幕上使用绝对长度单位，因为屏幕尺寸变化很大。像cm，px这种就属于绝对长度单位；而相对长度单位规定相对于另一个长度属性的长度。相对长度单位在不同渲染介质之间缩放表现得更好。像em，ex，%这种就属于相对长度单位。
px的特性是属于绝对数值，他不受外围的单位影响，只要固定是12px，就会以12像素呈现。以下方的范例来说，他并不会受到外围文字大小所影响，内部的文字大小还是依据CSS设定所呈现。
到此，以上就是小编对于css最常用的长度单位有哪些的问题就介绍到这了，希望介绍的几点解答对大家有用，有任何问题和不懂的，欢迎各位老师在评论区讨论，给我留言。
微信扫一扫打赏
