Zlog | Unit

1. 基本尺寸单位

单位	描述
%	百分比
in	英寸
cm	厘米
mm	毫米
em	相对父元素的大小倍放
ex	一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
pt	磅 (1 pt 等于 1/72 英寸)
pc	12 点活字 (1 pc 等于 12 点)
px	像素 (计算机屏幕上的一个点)

2. 常用单位

单位	描述
em	基于祖先（逐级向上找，设置了size的祖先元素）元素的大小倍放
rem	（ root em ）简写rem，相对于根元素（html标签）的size进行倍放，易于统一管理所有字体的大小
vw / vh	Viewport Width、Viewport Height是基于视图窗口的单位，此外还有vmin、vmax

2.1 vw / vh举例

缩放窗口，#test1 正方形等比缩放。

html

  <body>
    <div id="main">
      <div id="test1">test1</div>
    </div>
  </body>

css

   #main{
       width: 100vw;
       height: 100vw;
       /* width: 100vh;
       height: 100vh; */
       background-color: #b8860b;
   }
   #test1{
       width: 50%;
       height: 50%;
       background-color: #a1a08d;
   }

1. 基本尺寸单位

单位	描述
%	百分比
in	英寸
cm	厘米
mm	毫米
em	相对父元素的大小倍放
ex	一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
pt	磅 (1 pt 等于 1/72 英寸)
pc	12 点活字 (1 pc 等于 12 点)
px	像素 (计算机屏幕上的一个点)

2. 常用单位

单位	描述
em	基于祖先（逐级向上找，设置了size的祖先元素）元素的大小倍放
rem	（ root em ）简写rem，相对于根元素（html标签）的size进行倍放，易于统一管理所有字体的大小
vw / vh	Viewport Width、Viewport Height是基于视图窗口的单位，此外还有vmin、vmax

2.1 vw / vh举例

缩放窗口，#test1 正方形等比缩放。

html

  <body>
    <div id="main">
      <div id="test1">test1</div>
    </div>
  </body>

css

   #main{
       width: 100vw;
       height: 100vw;
       /* width: 100vh;
       height: 100vh; */
       background-color: #b8860b;
   }
   #test1{
       width: 50%;
       height: 50%;
       background-color: #a1a08d;
   }

Unit

1. 基本尺寸单位

2. 常用单位

2.1 vw / vh举例

评论 (0)

相关文章

OffscreenCanvas

Service Worker

vue-tour二次封装

Unit

1. 基本尺寸单位

2. 常用单位

2.1 vw / vh举例

评论 (0)

相关文章

OffscreenCanvas

Service Worker

vue-tour二次封装