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

wcssdu 2019-06-27

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;
}

如果要实现水平垂直居中

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

<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>

用视口来实现网格布局

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

<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>

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

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

<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>

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

相关推荐