css单位

1. px

  • 是什么：

    最罕用的单位，相对单位

  • 用法：

    .test-box{    font-size: 14px;}

  • 毛病：

    为固定值，一旦设置了就无奈因为适应页面大小而扭转

2. rem：

  • 是什么：

    是css3新增的绝对单位，指绝对于根元素的字体大小的单位

  • 用法：

    html{     font-size:14px}//

在元素上中：

.test-box{   font-size:2rem; }

  • 劣势：

    • 实现弱小的屏幕适配布局
    • 计算不便

  • 毛病：

    rem是绝对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能须要晓得他父元素的大小

3. em：

  • 是什么

    绝对单位，绝对于父元素。而rem是绝对于根元素。子元素字体大小的em是绝对于父元素字体大小。

  • 用法

    <div class="test">    我是父元素div    <p>        我是子元素p        <span>我是孙元素span</span>    </p></div>
.test {  font-size: 40px;  width: 10em; /* 400px */  height: 10em;  border: solid 1px black;}.test p {  font-size: 0.5em; /* 20px */   width: 10em; /* 200px */  height: 10em;}.test span {  font-size: 0.5em;    width: 10em;  height: 10em;  border: solid 1px blue;  display: block;}

  • 毛病：

    • 因为是绝对于父元素，所以在层叠时可能会呈现意想不到的成果。
    • 计算绝对于rem更麻烦

  • 劣势：

    • 实现自适应布局

4. vw, vh, vmin, vmax

  • 是什么：

    视口单位中的“视口”，桌面端指的是浏览器的可视区域(不包含工具栏和按钮的网页浏览器)；挪动端指的就是Viewport中的Layout Viewport。

    1.vw：1vw等于视口宽度的1%。2.vh：1vh等于视口高度的1%。3.vmin：选取vw和vh中最小的那个。4.vmax：选取vw和vh中最大的那个。