CSS中的常用单位_栅格 vw rem px

作者：IT小白 | 2024-08-22 05:57:28

踩

栅格 vw rem px

CSS中的常用的单位

px、em、rem

px：像素点,相对长度单位,相对于计算机屏幕分辨率
- Chrome浏览器默认显示最小字体为12px
em：相对长度单位，相对于当前对象内文本的字体尺寸
- 任意浏览器默认的相对字体高度为16em
- 12px = 0.75em
- 10px = 0.625em
rem: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是当前较小或较大的，用来设置字体可以保证在竖屏、横屏状态下字体大小一样

fr

fr,是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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

在这里插入图片描述
添加上面fr代码为：

grid-template-columns: 1fr 2fr;
1

效果为：
在这里插入图片描述
这样左列与右列的比例就是1：2，而且随着浏览器的缩放自适应大小1： 2。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/1015019

CSS中的常用单位_栅格 vw rem px

目录

CSS中的常用的单位

px、em、rem

vw、vh、vmin、vmax

fr