目录 CSS中的常用的单位px、em、remvw、vh、vmin、vmaxfr CSS中的常用的单位 px、em、rem
px：像素点,相对长度单位,相对于计算机屏幕分辨率
Chrome浏览器默认显示最小字体为12pxem：相对长度单位，相对于当前对象内文本的字体尺寸
任意浏览器默认的相对字体高度为16em12px = 0.75em10px = 0.625emrem:rem是CSS3新增的一个相对单位（root em，根em）
rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素 vw、vh、vmin、vmax(1)vw、vh、vmin、vmax：是视窗(Viewport)单位，是相对单位，由视窗大小决定.1个单位类似于1%
vw：视窗宽度的百分比(1vm = 视窗宽度的1%)vh：视窗高度的百分比vmin：表示vm、vh中的较小的一个值vmax：表示vm、vh中的较大的一个值(2)vw、vh和%的区别：
%是相对于父元素的大小而设定的比例,vw、wh是由视窗的大小来决定vw、vh可以直接获取视窗的宽度或高度,%在设置时要根据body的高度的情况，往往无法正确的获取实际宽度或高度(3)vmin、vmax的用处：
在开发移动页面时，使用vw、wh来设置字体的大小，在竖屏、横屏状态下显示的字体大小不一样由于vmin、vmain是当前较小或较大的，用来设置字体可以保证在竖屏、横屏状态下字体大小一样 frfr,是fraction的缩写，含义就是片段。fr更多用在栅格布局中： 例如：
<style> .grid-container { display: grid; padding: 10px; background-color: lightblue; } .grid-container>div { background-color: pink; text-align: center; padding: 10px; margin: 5px; } </style> <body> <div class="grid-container"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> <div>Six</div> </div> </body>添加上面fr代码为：
grid-template-columns: 1fr 2fr;效果为： 这样左列与右列的比例就是1：2，而且随着浏览器的缩放自适应大小1： 2。
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
