首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

css中的单位

前端开发中, 做适配是少不了的, 即页面在各种尺寸的机型中显示效果一样, 这就用到了css中的各种长度单位, 做一下总结 在css中, 长度单位分为以下几种 绝对单位: px、in、cm、mm、pt、pc...百分比单位: vw、vh、vmin、vmax、% 相对单位: em、rem、ex、ch 各单位的介绍 px 不用过多介绍, 精确像素 in 寸 cm 厘米 mm 毫米 pt 大约1/72寸 pc 大约...1/6寸 vw 以窗口宽度为参照, 1vw为窗口宽度的1% vh 窗口高度为参照, 1vh为窗口高度的1% vmin 窗口的宽度和高度中较小的一个为参照,百分比 vmax 窗口的宽度和高度中较大的一个为参照..., 百分比 % 以父节点为基准的百分比 em 以父节点字体大小为基准值, 父节点字体大小为20px, 则1.5em为30px rem 以根节点字体大小为基准值, 及HTML标签的字体大小 ex 当前字体...x的高度为基准, 无法确定时为0.5em ch 以当前字体0字符为基准值, 无法确定时为0.5em

1.5K20

CSS 中的各种单位

之前遇到 css 中需要使用单位的情况,都草草用 px 或者百分比糊弄过去,导致当需要做一个响应式的页面的时候,要重新补一下 css 单位的技术债。...px px 是 css 中最常用的字体大小单位。...px 就是表示 pixel,像素,是屏幕上显示数据的最基本的点;还有一个看起来很像的单位 pt,pt 就是 point,是印刷行业常用单位,等于1/72英寸,一般在打印的时候使用。...像素 px 是相对于显示器屏幕分辨率而言的,所以一般把它看做一个基础单位,很多其它单位都是以 px 为参照的。...百分比 css 中的百分比是一种相对值,使用百分比的关键是找到它的参照物。 属性 参照 width & height 宽和高在使用百分比值时,其参照一般都是父元素的 content 的宽和高。

79120
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Android 中的长度单位详解

    如果设置表示长度、高度等属性时可以使用 dp 或 sp。但如果设置字体,需要使用 sp。 dp 是与密度无关,sp除了与密度无关外,还与 scale 无关。...1dp=1sp=1px 二、介绍一下px 但如果使用 px 作单位,如果屏幕大小不变(假设还是3.2 寸),而屏幕密度变成了320。...也就是说,如果使用 dp 和 sp,系统会根据屏幕密度的变化自动进行转换。下面看一下其他单位的含义px:表示屏幕实际的象素。...例如,形容手机屏幕大小,经常说,3.2(英)寸、3.5(英)寸、4(英)寸就是指这个单位。 这些尺寸是屏幕的对角线长度。...如果手机的屏幕是3.2 英寸,表示手机的屏幕(可视区域) 对角线长度是3.2*2.54 = 8.128 厘米。读者可以去量一量自己的手机屏幕,看和实际的尺寸是否一致。

    53610

    kubernete中的原子调度单位:pod

    在前面的文章中,我们介绍了容器技术,他的本质是操作系统上的一个进程,那么打包的容器镜像其实就是一个安装包,类似于windows操作系统中的exe文件,那容器所在的kubernete集群其实就是一个操作系统...而如果我们使用kubernete中的pod,pod会对3个容器统一管理和调度,这样就会直接选择A宿主机。...在pod的,实现这个功能,依靠的是一个infra容器,这个容器使用的镜像是k8s.gcr.io/pause,只有不到200k,它的状态永远是pause,作用是启动后控制namespace,pod中的其他容器启动后就可以加入当前这个...定义了一个pod,这个pod中有2个容器,其中一个是运行标准Tomcat8镜像,一个是存放Tomcat下的war包,这儿使用的是我之前做的一个springboot-rabbitmq的镜像。...上面这个配置所使用的设计模式,叫做sidecar,也就是在pod中启动一个辅助容器来配合主容器进程的工作,上面的war容器就是一个sidecar。

    56220

    Android中的单位(dp、sp、dpi)

    概述 因为不同的屏幕具有不同的像素密度,因此同样数量的像素在不同设备上可能对应于不同的物理尺寸。因此要使用 dp和 sp单位。 dp:是一种密度无关像素,对应于160dpi下像素的物理尺寸。...sp:是相同的基本单位,但它会按用户首选的文本尺寸进行缩放(属于缩放无关像素),因此在定义文本尺寸时应使用此计量单位(但切勿为布局尺寸使用此单位)。 px 像素,屏幕上显示数据的最基本的点。...dpi dpi(Dots Per Inch):每英寸的点数,也称像素密度,即屏幕对角线像素值÷英寸值。 ? 例:720x1280分辨率5.7英寸的手机: ?...dp dp:在每英寸160点的显示屏上,1dp = 1px,即px = dp(dpi / 160) sp sp(Scaled Pixels):通常用于指定字体的大小,当用户修改手机显示的字体时,字体大小会随之改变...context.getResources().getDisplayMetrics().scaledDensity; return (int) (pxValue / fontScale + 0.5f); } } 使用

    2K10

    论CSS中可使用的font-size的长度单位

    本文里, 你可以学习到不同的长度单位,以及它们是如何影响其元素中的字体大小的。 像素单位(px) 像素是固定的长度单位。它们是根据用户屏幕上的每一个点的尺寸确定的。...由于这一单位的具体值取决于给定元素继承的 font-size,因此,如果要单独设置网站的某些部分的字体大小,比如独立的模块中的元素,则这一单位很有效。...这个技巧在视窗单位的基础排版一文中有具体解释。 其他绝对值单位 CSS也允许其他很多绝对值单位,这些单位在屏幕排版的情况下使用较少,更多是用在传统的打印介质中。...你可以使用pt或者pc设置打印的字体大小版式。这些值分别使用0.0123或者0.1666英寸为单位。类似的,你还可以使用英寸(in),厘米(cm)和毫米(mm)来设置页面的打印边距。...即便在IE9或者IE10的版本里,使用rem给缩写的 font属性设置字体大小时,都可能使赋值失败。这两个浏览器也不支持给伪元素使用rem单位。 本文讨论的所有单位中,视窗单位的浏览器支持是最少的。

    2.4K20

    如何决定响应式网站的 CSS 单位?

    在我们创建适合各种设备的响应式网站时,了解正确的CSS 单位很重要。不过在深入研究决策之前,让我们先对它们进行分类以便了解它们的用途。 如何决定响应式网站的 CSS 单位?...- 根 em 相对于查看端口/文档 vw vh vmax vmin 在这里学习最常见的单位 px 单位 绝对像素单位仅用于屏幕(界面),其余单位用于打印。...如果未覆盖,默认字体大小为 16px,假设在父元素中字体大小为 48px,那么在子元素中为 1em == 48px。...因为它可以让我们根据元素的字体大小在框周围使用灵活的间距。...概括总结 px单位常用于边框。 % 单位相对于相对父级的宽度。 em 单位相对于元素字体大小的边距和填充 。 rem 单位相对于根的字体大小 。

    1K10

    微信小程序布局单位的使用

    rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。官方推荐微信小程序可以用iPhone6 作为视觉稿的标准。规定屏幕宽为750rpx。...,但是宽度的rpx却是固定的,所以可以使用rpx作为单位,来设置布局的宽高,不是所有的单位都适合rpx,字体不适合rpx,会导致不同设备看不清。...视口单位中的“视口”,桌面端指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Viewport。 vw:viewpoint width,视口宽度,1vw等于视窗宽度的1%。...vh:viewpoint height,视口高度,1vh等于视窗高度的1%。 vw和vh是css3中的新单位,是一种视窗单位,在小程序中也同样适用。...vmax:vw和vh中较大的那个。

    3.1K61

    深度解析CSS中的单位以及区别

    css中有几个不同的单位表示长度,使用时数字加单位。如果长度为0,则可以省略单位。 长度单位可分为两种类型:相对和绝对。...绝对长度 绝对长度单位是一个固定的值,反应真实的物理尺寸,不依赖于显示器、分辨率、操作系统等。...具体单位以及解释如下: px像素:一个像素就相当于我们屏幕中的一个小点,屏幕实际就是由很多个像素点构成的,不同显示器像素大小不同,像素越小,显示效果就越好。 cm厘米:这个单位大家常见,不解释。...vw:vw(viewpoint width)视窗宽度,1vw = 视窗宽度的1% vh:vh(viewpoint height)视窗高度,1vh = 视窗高度的1% vmin:vw和vh中较小的那个。...vmax:vw和vh中较大的那个。 一些设置css长度的属性有width、height、margin、padding、font-size、border-width等。

    44310

    深度解析CSS中的单位以及区别

    css中有几个不同的单位表示长度,使用时数字加单位。如果长度为0,则可以省略单位。 长度单位可分为两种类型:相对和绝对。...绝对长度 绝对长度单位是一个固定的值,反应真实的物理尺寸,不依赖于显示器、分辨率、操作系统等。...具体单位以及解释如下: px像素:一个像素就相当于我们屏幕中的一个小点,屏幕实际就是由很多个像素点构成的,不同显示器像素大小不同,像素越小,显示效果就越好。 cm厘米:这个单位大家常见,不解释。...vw:vw(viewpoint width)视窗宽度,1vw = 视窗宽度的1% vh:vh(viewpoint height)视窗高度,1vh = 视窗高度的1% vmin:vw和vh中较小的那个。...vmax:vw和vh中较大的那个。 一些设置css长度的属性有width、height、margin、padding、font-size、border-width等。

    40020

    算法系列-----矩阵(一)-------------单位矩阵的生成

    所以这里我就把矩阵中涉及的各种方法单独的列出来,一个文章只介绍那一种方法,好了,废话不多说,开始吧! 在矩阵的乘法中,有一种矩阵起着特殊的作用,如同数的乘法中的1,我们称这种矩阵为单位矩阵....对于单位矩阵,有AE=EA=A A[4][4]:如下所示 1.0 0.0 0.0 0.0 0.0 1.0 0.0 0.0 0.0 0.0 1.0 0.0 0.0 0.0 0.0 1.0 单位矩阵的生成方法...: /** * 生成单位阵 * * @param args * 参数a是一个整型的数,是要输出单位阵的行列数,我们知道单位矩阵是一个方阵,所以只需要参数a即可...if (i == j) { I[i][j] = 1; } else { I[i][j] = 0; } } } return I; } 矩阵的打印...单位矩阵很重要的啊。 单位矩阵无平移 缩放 旋转 以后在哪里用到了我就再在这里标注。

    47530

    Excel中的单位换算,想不到的容易

    如果处理测量数据时需要将数据从一个长度测量单位转换为另一个长度测量单位,使用Excel公式可以很容易做到。 本文将展示如何使用简单的公式将一个长度测量单位中的值转换为另一个。...是数字现有的测量单位的代码 参数to_unit是数字要转换的测量单位的代码 公式很简单,关键是需要知道可以在公式中使用的正确测量单位代码。...下面是一些可在公式中使用的测量单位代码: 英寸:in 英尺:ft 米:m 毫米:mm 厘米:cm 完整的测量单位代码,例如重量、距离、时间、压力、力、能量、功率等,可以在下面的链接中查看: https:...ns=excel&version=90&ui=en-us&rs=en-us&ad=us 示例:将英寸转换成毫米、厘米、米或英尺 如下图1所示,要将列A中的以英寸为单位的数据转换为以毫米为单位的数据,使用公式...当输入公式时,Excel会显示所有可用的单位,可以从智能提示中进行选择。不知道是什么原因,“mm”和“cm”并不在其显示的列表中,但它们在公式中仍然有效。

    2.8K10

    聊一聊CSS中的长度单位

    使用场景 那么这些属性和单位怎么配合使用呢?特定的属性需要使用特定的单位吗?...单位虽然和属性无关,但是和输出的媒介有一定关系,比如输出到是屏幕还是纸张。在屏幕上显示和在纸张上面打印推荐使用的单位是不一样的。...下表给出了推荐的使用方法: 输出媒介 推荐 偶尔使用 不推荐 屏幕 em, px, % ex pt, cm, mm, in, pc 打印 em, cm, mm, in, pt, pc, % px, ex...而在高分辨率设备上(如现在的高清屏和打印机)绝对单位显示得更精确。由于以上原因,绝对单位更多的是在打印时使用。 曾经,CSS要求在计算机屏幕上正确显示绝对单位。...因为这一特性,rem现在被更广泛的应用于响应式设计。 ch ch用的表较少,是CSS3中新加入的单位,表示当前字体中的 "0" (零、unicode 字符 U+0030) 的宽度。

    1.1K70

    【知识】Latex中的emptmm等长度单位及使用场景

    转载请注明出处:小锋学长生活大爆炸[xfxuezhagn.cn]目录一、Latex中的em pt mm等度量单位说是什么意思?还有哪些?二、在使用的时候应该如何选择?他们分别适用于那些场景?...使用细微调整一、Latex中的em pt mm等度量单位说是什么意思?还有哪些?        ...适合在需要精确对齐或符合特定打印标准的文档中使用。mm, cm:适用于页面布局设计,如设定页边距、列宽等。当文档需要在多种不同的打印机或纸张尺寸上打印时,使用公制单位可以更容易地管理和预见打印效果。...对于大多数日常应用场景而言,sp单位过于细小,不常直接使用。选择技巧:如果是跨设备(如屏幕和打印)或跨国界(考虑到不同国家使用的度量系统不同)的文档,使用mm或cm可以简化处理过程。...} b \] % 使用具体的点数        这些示例显示了如何在LaTeX文档中根据不同的需要选择和应用各种度量单位。

    83210

    致刚刚毕业的你:如何选择实习单位?

    等待面试结果通知 我经常收到即将毕业的学妹学弟的询问“该如何选择实习单位?”,而他们的困惑主要集中在“没有更多选择时还好,选择一多,反而使得自己举棋不定,往往错失良机”。...因为,今后在社会上,大家要做的不再是听话服从,而是学会如何选择。 好吧,上面说了一大堆废话,那么到底应该选择什么?当前的选择对不对?现在的选择是不是最好的?别人的选择是不是更英明?...然后再考虑自己决策背后的各方面因素。 最后做决定前先问自己两个问题:1.我为什么要选择这个?2.我是根据什么来排除另外两项的? 你在日常生活中,又是如何排除自己的其他选项的呢?...那些五年前真正看到工作未来价值的同学,在这场人生竞赛中已经远远超前,因为他们当时看到的,是工作中那些在未来有价值的东西——平台、资源、眼界、机会、好老板、失败的经验。...你的杯子叫做什么?无论如何,请大家记得:不要为一个水杯约束你真正有价值的生命! ---- 谢谢你的阅读。

    703100
    领券