CSS中的常用单位

目录

  • CSS中的常用的单位
    • px、em、rem
    • vw、vh、vmin、vmax
    • fr

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>Onediv>
        <div>Twodiv>
        <div>Threediv>
        <div>Fourdiv>
        <div>Fivediv>
        <div>Sixdiv>
    div>
body>

CSS中的常用单位_第1张图片
添加上面fr代码为:

grid-template-columns: 1fr 2fr;

效果为:
CSS中的常用单位_第2张图片
这样左列与右列的比例就是1:2,而且随着浏览器的缩放自适应大小1: 2。

你可能感兴趣的:(#,HTML/CSS,正在路上的前端攻城狮的烂笔记,1024程序员节,css3,css,前端)