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

weij 发布于2019-08-26 11:56 / 602人阅读

摘要：基于视口的单位视口单位可以用来什么，比如实现响应式设置相对视口的宽度和高度，可以实现水平垂直居中实现网格布局将图片按照屏幕的比例显示这几个单位是相对于视口的，也就是可视区域，总共分成了份。

rem

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

用css媒体查询

用相当于视口宽度单位的vw值（这个下一部分讲）

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

rem

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

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

实现响应式

设置相对视口的宽度和高度，可以实现水平垂直居中

实现网格布局

将图片按照屏幕的比例显示

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

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

rem

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

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

如果要实现水平垂直居中


hello css

用视口来实现网格布局

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

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

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


    
     标题被限制输入了，超出隐藏哦。

云服务器 GPU云服务器 rem单位应用的是rem单位选云服务器的几个注意和需求单位自建服务器和放上的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107874.html

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

摘要：基于视口的单位视口单位可以用来什么，比如实现响应式设置相对视口的宽度和高度，可以实现水平垂直居中实现网格布局将图片按照屏幕的比例显示这几个单位是相对于视口的，也就是可视区域，总共分成了份。 rem rem是设计响应式网页的神器，因为rem单位是相对HTML元素的font-size属性的，因此当使用rem作为属性单位时，当改变HTML元素的font-size，其他使用rem作为单位的元素...

leiyi 2019-08-29 15:34 评论0 收藏0
CSS：7个你可能不认识的单位

摘要：原文译文个你可能不知道的单位译者众所周知，当使用技术的时候，很容被一些奇异问题给困住。今天，我就介绍一些你之前可能不知道的属性，是一些例如和测量方面的单位，但是很有可能你之前都没听过这些。然而，对于每一个问题，百分比并不是最好的解决方案。原文：7 CSS Units You Might Not Know About 译文：7个你可能不知道的CSS单位译者：dwqs 众所周知，...

peixn 2019-08-28 18:02 评论0 收藏0
CSS 单位

摘要：概览中的长度单位有很多，觉得有必要整理备忘。单位大体分为两大类绝对单位，不会因为其他元素的尺寸变化而变化。如果想使用显示窗口的宽度或高度而不是父元素的宽度将会怎么样这正是和单位所提供的。和现代浏览器都支持这两个单位。概览 CSS中的长度单位有很多，觉得有必要整理备忘。网上介绍的也比较多和全，详见参考资料。单位大体分为两大类：绝对单位，不会因为其他元素的尺寸变化而变化。相对...

ARGUS 2019-08-28 18:23 评论0 收藏0
css中的尺寸和单位

摘要：前言本文主要介绍的尺寸和单位，专门查了加上自己的一些理解。比如等属性的类型分为绝对单位和相对单位相对单位相对单位代表以其他距离为尺寸的一种单位，包括，，，，。前言本文主要介绍css的尺寸和单位，专门查了mdn, 加上自己的一些理解。本文参考mdn 类型 length表示距离尺寸的一种css数据格式,它由数值+单位组成，如果数值为0，单位可以省略。比如width, height, m...

noONE 2019-08-30 15:55 评论0 收藏0
css中的尺寸和单位

摘要：前言本文主要介绍的尺寸和单位，专门查了加上自己的一些理解。比如等属性的类型分为绝对单位和相对单位相对单位相对单位代表以其他距离为尺寸的一种单位，包括，，，，。前言本文主要介绍css的尺寸和单位，专门查了mdn, 加上自己的一些理解。本文参考mdn 类型 length表示距离尺寸的一种css数据格式,它由数值+单位组成，如果数值为0，单位可以省略。比如width, height, m...

cod7ce 2019-08-23 14:53 评论0 收藏0