CSS:度量单位(px,em,rem,vw,%等)

  • 时间:
  • 浏览:116
  • 来源:无双科技

介绍

我决定写这个博客的目的是希望探索更多有关使用CSS调整大小的方法。 有这么多种可能性,很容易感到不知所措和困惑。 浏览器当前支持16种度量单位:像素,英寸,皮卡,厘米,毫米,点,百分比,em,rem,视口尺寸(vw,vh),ex,ch,Vmax(最大视口)和vmin (viewportmin)在这16个单位中有两类:相对长度和绝对长度。

相对长度

首先要了解相对长度,它们会在其他物体上获得尺寸,这些尺寸在您要设定尺寸的元素之外或相对于它们,例如,父级的尺寸,字体大小和视口尺寸。

百分比

百分比基于其父元素。 因此,如果一个元素为200px * 200px,并且该元素的子元素的宽度为50%,高度为50%,则该子元素的等效尺寸为100px * 100px,因为200px的50%为100px。

6931188a8b594e6cb92dc85c2f267eec.jpg

在这里,我们有一个名为" parent-box"的div元素和一个名为" child-box"的子div元素。

CSS:度量单位(px,em,rem,vw,%等)

在css文件中,我将父盒的高度和宽度设置为200px,子盒的宽度和高度设置为50%,这意味着现在子盒将是父盒尺寸的50%,因此 如果父框为200px * 200px,则表示子框为100px * 100px,结果如下:

CSS:度量单位(px,em,rem,vw,%等)

如您所见,蓝色元素(即子元素)正好是粉红色框(即父元素)的50%。

视口尺寸

当前有四种类型的视口尺寸单位,vw(视口宽度),vh(视口高度),vmin(视口最小)和vmax(视口最大)。 使用这些单位时要知道的第一件事是,它们会自动将浏览器的屏幕划分为100 x 100的不可见网格,网格中的每个正方形或单位将根据情况代表一个vw,vh,vmin或vmax。

CSS:度量单位(px,em,rem,vw,%等)

vh 与 vw

因此,让我们更深入地研究这两个。 如果我们声明一个元素的宽度为50vw且高度为50vh,我们将看到该元素将恰好占据页面高度的一半,并且占据页面宽度的一半,每个vw或vh现在相当于那个不可见的100 *中的一个单元 100,所以如果我们声明一个元素为50vw,它将是浏览器宽度的一半,下面我们来看一个示例。

CSS:度量单位(px,em,rem,vw,%等)

CSS:度量单位(px,em,rem,vw,%等)

在这里,我们看到父元素恰好是浏览器高度和宽度的一半。

vmin和vmax

这些单位比较棘手。 因此,这些单元的工作方式是将使用高度或宽度的最大或最小长度。 例如,让我们声明父框的宽度为50vmax,如果浏览器的宽度为800px,高度为500px,则父框的宽度为400px,因为宽度大于高度,所以 元素将从浏览器的水平部分的不可见网格中获取50个单位,现在,如果高度为1000px,宽度为500px,则父框的宽度现在为500px,因为浏览器的高度现在大于宽度,因此父元素 box将占据浏览器垂直边100平方中的50平方,并使用它来声明父对象的框宽。

现在进入vmin。 假设我们声明父级框的宽度为50vmin,那么从最小视口尺寸开始,父级框的宽度将占据50个网格单位。 同样的示例,如果浏览器的宽度为800px,高度为500px,则父框的宽度现在将为250px,因为我们声明父框的宽度为最小视口尺寸的50个单位, 在这种情况下,是高度。 现在,如果高度为1000像素,宽度为600像素,则父框的宽度现在为300像素,我知道这非常令人困惑,因此让我们回到第一个示例:

CSS:度量单位(px,em,rem,vw,%等)

Here we declare the width to be 50vmax (50 units out of 100 from the BIGGEST viewport dimension)

这样看起来像这样:

CSS:度量单位(px,em,rem,vw,%等)

我们可以看到父框现在恰好是浏览器宽度长度的一半,这是因为浏览器的宽度大于高度。 现在,如果我们改变一切,将会得到不同的结果。

CSS:度量单位(px,em,rem,vw,%等)

Here we declare the width to be 50vmin (50 units out of 100 from the SMALLEST viewport dimension)

所以看起来像这样:

CSS:度量单位(px,em,rem,vw,%等)

我们可以看到父框现在恰好是浏览器高度的一半,这是因为浏览器的高度小于宽度。

基于字体属性的单位

ex 和 ch

我从未使用过这些单元,但让我们看看它们是如何工作的。 所以首先让我们从ex开始。 这个单位测量您正在使用的任何字体系列的字母" X"的高度,这是指字母" X"的高度? 因此,如果此" X"的高度为10px(字面的字母为" X"),则1ex将为10px,假设您使用的是另一个字体系列中的" X",其中" X"的高度为9px,所以现在1ex 是9px。

ch的行为方式非常相似,不同之处在于1ch的长度将基于字体家族的字母" O"的宽度,因此,如果字母" O"的宽度为5px,则1ch将等于5px 。

em

此单位响应父元素的字体大小,因此,如果父元素的字体大小为10px,则每个em现在等于10 px。

CSS:度量单位(px,em,rem,vw,%等)

在这里,我们在父框内声明一个10px字体大小,并将子元素的宽度和高度设置为5em,因此,如果父元素的字体大小为10px,则意味着每个em值10px,因此我们的子元素将为50px * 50像素

CSS:度量单位(px,em,rem,vw,%等)

em的作用是它们级联,这意味着什么? 因此,如果子元素内有另一个元素,并且将其尺寸设置为5em,则第二个子元素将为100px * 100px

CSS:度量单位(px,em,rem,vw,%等)

发生这种情况的原因是,当一个孩子中有另一个元素时,第二个孩子会将值乘以2,疯狂吗? 这就是为什么在使用em时我们必须小心。

rem

现在,rem与em有所不同,因为rem基于根字体大小而不是父字体来确定其尺寸。 rem一词的意思是" root em",这解决了我们在em元素级联时遇到的问题,通过基于root取其维度,rem值在整个文件中都相同。 因此,让我们看一下相同的示例,但带有rem。

CSS:度量单位(px,em,rem,vw,%等)

因此,如果将本示例与上面的示例进行比较,我们可以看到父框的字体大小现在为30,但是第一个和第二个子控件的字体大小较小,我们还可以看到元素没有级联, 是因为以10px的字体大小声明了根,所以无论何时我们现在使用rem,它都将始终引用10px。

绝对长度

绝对长度不会根据其他因素或页面,父级,视口等其他因素来决定其大小。

英寸,厘米和毫米。

因此,我觉得关于这些度量单位的解释很多。 如果您将某物声明为1in,则无论屏幕大小如何,该值都将为1in。 厘米和毫米也一样

CSS:度量单位(px,em,rem,vw,%等)

Points和Picas

因此,points和picas是印刷术语。 point是1/72英寸,因此很小,12点活字就是12点或1/6英寸。

最后但并非最不重要…

像素!

现在,像素是绝对长度,但是它们的大小可能取决于您所使用的设备,某些设备的像素比其他设备大,这取决于它们的密度和分辨率。

CSS:度量单位(px,em,rem,vw,%等)

猜你喜欢

各大中文网站蜘蛛userAgent及IP段

各大中文网站蜘蛛userAgent及IP段

UserAgent中文名为用户代理,简称UA,它是一个特殊字符串头,使得服务器能够识别客户使用的操作系统及版本、CPU类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件

2020-05-28

蜘蛛爬虫userAgent百度蜘蛛360蜘蛛google蜘蛛蜘蛛IP

mj12bot是什么? 半个小时爬取800多,禁止蜘蛛MJ12bot抓取网站信息

mj12bot是什么? 半个小时爬取800多,禁止蜘蛛MJ12bot抓取网站信息

打开网站突然看到新增蜘蛛爬虫900多,事出异常必有妖,查看分类,发现出现大量不知名爬虫具体爬虫userAgent:mozilla/5.0(compatible;mj12bot/

2020-05-27

HTML5 Meta 标签:HandheldFriendly,MobileOptimized

HTML5 Meta 标签:HandheldFriendly,MobileOptimized

Meta标签:viewportviewport几乎已经是公认的标准了,最初是由苹果公司创建,用于iPhone上面的移动版Safari,由于iPhone的大卖,大部分其他移动浏览

2020-05-22

HTML5mate标签

layui的监听事件中报错element.on is not a function?

layui的监听事件中报错element.on is not a function?

添加layui做tab标签切换时添加table时报错  element.onisnotafunctionlayui.config({  

2020-05-08

tablayui龙华网站制作深圳网站建设

JS 图片简易压缩

JS 图片简易压缩

前言说起图片压缩,大家想到的或者平时用到的很多工具都可以实现,例如,客户端类的有图片压缩工具PPDuck3,JS实现类的有插件compression.js,亦或是在线处理类的O

2020-04-29

图片优化图片压缩js图片处理