css中的几个单位——rem，视口单位和ch

rem

rem是设计响应式网页的神器，因为rem单位是相对HTML元素的font-size属性的，因此当使用rem作为属性单位时，当改变HTML元素的font-size，其他使用rem作为单位的元素也会跟着适配大小。那么如何根据屏幕的大小制作一个响应式的网页呢。

• 用css媒体查询
• 用相当于视口宽度单位的vw值（这个下一部分讲）

这里先说说用css媒体查询，如下面所示，屏幕查询可以指定一个屏幕大小，当屏幕是你指定的大小时，它就会运行里面的代码，但是这种方法有一个缺点---它并不能控制更加精确的尺寸，所以我们可以使用vm来解决这个问题。

<style>
    body,div{
        margin:0;
        padding:0;
    }
    html{
        font-size:12px;
    }
    @media screen and (min-width:320px){
        html{
            font-size:14px;
        }
        
    }
    @media screen and (min-width:640px){
        html{
            font-size:16px;
        }
        
    }
    @media screen and (min-width:1000px){
        html{
            font-size:18px;
        }
    }
    .box{
        width:10rem;
        height:10rem;
        font-size:2rem;
        background-color:pink;
    }
</style>
<div class="box">rem</div>

vw,vh,vmin,vmax基于视口的单位

视口单位可以用来什么，比如:

• 实现响应式
• 设置相对视口的宽度和高度，可以实现水平垂直居中
• 实现网格布局
• 将图片按照屏幕的比例显示

这几个单位是相对于视口的，也就是可视区域，总共分成了100份。如果想让一个字体的大小在指定的区间内变化，比如可视区域的大小在980px-320px时，让字体的大小在14-20之间变化，可以

14-(20-14)*(980-320)/(980-320)

<style>
    body,div{
        margin:0;
        padding:0;
    }
    html{
        font-size:20px;
    }
    @media screen and (max-width:980px){
        html{
            font-size:calc(14px+6*(100vm-320px)/660);
        }
        
    }
    .box{
        width:10rem;
        height:10rem;
        font-size:2rem;
        background-color:pink;
    }
</style>
<div class="box">rem</div>

除了用这些基于视口的单位来做响应式，还可以做一些其他的事情。我们知道，如果某个值可以继承，则百分比参照的是父元素计算的值。而当父元素不设置高度时，则是根据子元素高度来确定的。所以，如果没有直接设置宽度和高度，100%的设置是没有作用的。如果用视口单位，就不会有这种情况了，因为它是相对屏幕可视区的

.box{
  width:100vw;
  height:100vh;
  background-color:pink;
}

如果要实现水平垂直居中

<style>
  body,div{
  margin:0;
  padding；0；
}
.box{
  width:100px;
  height:100px;
  margin-left:calc(50vw-50px);
  margin-top:calc(50vh-50px);
  background-color；pink;
}
</style>
<div class="box">hello css</div>

用视口来实现网格布局

<style>
body,div{
  margin:0;
}
.column-1{
  float:left;
  width:100vw;
}
.column-2{
  float:left;
  width:calc(100vw/2);
}
.column-3{
  float:left;
  width:calc(100vw/3);
}
body>div{
  overflow；hidden；
}
div>div{
  height:35px;
  outline:1px solid #dedede;
}
.box-1 div{
  background-color:red;
}
.box-2 div{
  background-color:orange;
}
.box-3 div{
  background-color:pink;
}
</style>
 <div class="box-1">
   <div class="column-1"></div>
 </div>
 <div class="box-2">
   <div class="column-2"></div>
   <div class="column-2"></div>
 </div>
 <div class="box-3">
   <div class="column-3"></div>
   <div class="column-3"></div>
   <div class="column-3"></div>
  </div>

另外，当需要将图片按照屏幕的比例显示时，用视口单位也是不错的选择

ch

ch是一个相对于数字0的大小，比如定义了5ch的宽度，那么就只能装下5个0。实际上1ch=1个英文=1个数字，2ch=1个中文。

 <style>
        body,div{
            margin:0;
            padding:0;
        }
        .box{
            width:5ch;
            background-color:grey;
        }

    </style>
    <div class="box">
     000000
    </div>

如果项目需要限制输入个数，可以使用下面代码

<style>
        body,div{
            margin:0;
            padding:0;
        }
        h1{
            width:18ch;
            overflow: hidden;//超出隐藏
            white-space: nowrap;//防止换行
            text-overflow: ellipsis;//省略号
            font-size: 50px;
            background-color: deeppink;
        }

    </style>
    <h1>
     标题被限制输入了，超出隐藏哦。
    </h1>