首页
学习
活动
专区
工具
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
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    CSS 中的相对单位

    CSS 单位通常会根据浏览器、操作系统或硬件适当缩放,但是通常 96px 为一个物理英寸的大小。 # em 和 rem em 是最常见的相对长度单位,适合基于特定的字号进行排版。...在 CSS 中,1em 等于当前元素的字号,其准确值取决于作用的元素。 浏览器会根据相对单位的值计算出绝对值,称作计算值(computed value)。...,覆盖之前的两个值 */ :root { font-size: 1em; } } # 缩放单个组件 需要让同一个组件在页面的某些部分显示不同的大小,你可以用 em 来单独缩放一个组件...视口的相对单位 vh: 视口高度的 1/100 vw:视口宽度的 1/100 vmin:视口宽、高中较小的一方的 1/100(IE9 中叫 vm,而不是 vmin) vmax:视口宽、高中较大的一方的...:可以在多个选择器中定义相同的变量,这个变量在网页的不同地方有不同的值。

    91420

    基于数据中台的ERP系统数据按单位拆分方案【上篇】

    作者:HappSir 声明:本文系作者原创,仅用于SAP等ERP软件的应用与学习,不代表任何公司。...目录 一、整体概述 二、拆分思路 三、具体措施(下篇会详细介绍) 本文基于数据中台中已接入的ERP系统数据,为确定数据中台中ERP系统业务数据所属单位或部门,明确数据安全、数据质量等权责,提升企业ERP...系统各模块业务数据的质量,确保数据中台ERP系统数据能够有效支撑企业数据数字化转型各项数据分析与应用,有必要对ERP系统各模块业务数据按单位进行数据拆分,本节详细介绍ERP系统数据拆分的思路、具体措施,...对其它EPR系统及非ERP系统数据的拆分具有指导意义。...注:本节基于某企业数据中台ERP系统数据按单位拆分实践,结合自身对数据拆分的思考后编写而成,所有内容已进行信息脱敏,纯粹从ERP系统(以SAP软件为例)的视角阐述数据如何进行单位化拆分,仅供大家参考借鉴

    1.1K40

    kubernete中的原子调度单位:pod

    在前面的文章中,我们介绍了容器技术,他的本质是操作系统上的一个进程,那么打包的容器镜像其实就是一个安装包,类似于windows操作系统中的exe文件,那容器所在的kubernete集群其实就是一个操作系统...容器和操作系统中进程一样,并不是独立的运行,而是和其他容器之间有着关联的关系。...调度在一个pod的中的容器,一般具有某些关联关系,比如共享Linux namespace,共享volume,通过localhost进行通信。像Tomcat和它所依赖的war包,就是这样的一个例子。...namespace中,这样pod中的容器共享一份namespace,就可以通过localhost进行通信了。...同时我们也看到war包所在的容器类型是initContainer,这个镜像的特点是会比spec.containers中的容器先启动。

    56220

    消息队列:系统架构中的关键组件

    在复杂的系统架构中,组件间的通信是至关重要的问题。消息队列作为一种解决方案,能够使组件之间的通信更加高效、可靠。本文将从简单到复杂,逐步向您介绍消息队列的概念、使用场景以及如何实现。什么是消息队列?...消息队列的优势消息队列具有以下几个优势:异步处理:提升性能,不阻塞主线程。系统解耦:生产者和消费者独立运行,互不影响。容错性:系统部分组件失败时,不会影响整体。负载均衡:根据处理能力动态调整工作负载。...消息队列在分布式系统中的运用在分布式系统中,消息队列更常使用如RabbitMQ、Apache Kafka等专业的消息队列中间件。以下是使用RabbitMQ的Python示例代码。...订阅模式没有官方的消息路由器和负载均衡器结论消息队列是现代分布式系统架构中不可或缺的组件,它提供了高效、可靠的异步通信方式。...无论是在处理高峰期的大量请求,还是实现不同系统间的松耦合通信,消息队列都展现出了其独特的价值。希望本文能帮助您了解并入门消息队列,为构建更好的系统架构打下基础

    24221

    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):通常用于指定字体的大小,当用户修改手机显示的字体时,字体大小会随之改变...单位转换 public class SizeUtil { public static int dp2px(Context context, float dpValue) { float

    2K10

    组件分享之后端组件——基于Java的分布式系统的延迟和容错组件(熔断组件)Hystrix

    组件分享之后端组件——基于Java的分布式系统的延迟和容错组件(熔断组件)Hystrix 背景 近期正在探索前端、后端、系统端各类常用组件与工具,对其一些常见的组件进行再次整理一下,形成标准化组件专题,...后续该专题将包含各类语言中的一些常用组件。...组件基本信息 组件:Hystrix 开源协议:LICENSE 内容 本节我们分享一个基于Java的分布式系统的延迟和容错组件(熔断组件)Hystrix,Hystrix是一个延迟和容错库,旨在隔离对远程系统...、服务和第 3 方库的访问点,停止级联故障并在故障不可避免的复杂分布式系统中实现弹性。...观察服务和财产变化在整个车队中传播时立即生效。 在几秒钟内收到警报、做出决定、影响变化并看到结果。 3) 并发 并行执行。并发感知请求缓存。通过请求折叠自动批处理。

    37830

    深度解析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等。

    39920

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

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

    2.8K10

    聊一聊CSS中的长度单位

    使用场景 那么这些属性和单位怎么配合使用呢?特定的属性需要使用特定的单位吗?...除了和输出媒介的关系,这些单位可以从长度值的计算方式区分为绝对单位和相对单位。...绝对单位 绝对单位(px,cm, mm,in,Q,pt和pc)意味着以此为单位的长度值与其代表的物理长度相等,比如width: 1cm即与现实世界中的1cm长度相等,也意味着绝对单位在所有的媒介上的显示效果是一致的...因为这一特性,rem现在被更广泛的应用于响应式设计。 ch ch用的表较少,是CSS3中新加入的单位,表示当前字体中的 "0" (零、unicode 字符 U+0030) 的宽度。...Viewport Based vw,wh,vmin,vmax 都是CSS3中新加入的单位。vw,vh可以根据视窗大小调整字体大小。vw是视窗的1/100的宽度,而vh是视窗1/100的高度。

    1.1K70

    SAP系统里批次双计量单位的实现

    SAP系统里批次双计量单位的实现 【业务场景】 某个汇流条物料,基本计量单位是PC,订购单位也是PC,但是按重量付钱给供应商。供应商送过来的每个批次的汇流条物料,其单位克重各不相同。...业务部门希望查询库存的时候能按PC以及重量G为单位来显示库存数量。 【实现方案】 一,物料主数据 物料号:11000449 批次分类里有克重相关的特性, ?...可替换的计量单位里维护标准的替换关系, ? 二,分类数据设置 分类:B1005 ? 三,双计量单位的配置 3.1) 双计量单位之G/P, CUNI, ? 3.2) 批次双计量单位的激活 ? ?...四,采购信息记录 订购单位是PC, ? 但是按重量计价, ? 采购定价单位,按重量 KG来采购,11.05/KG ? 五,不同批次里克重特性值 物料批次里每批克重不同, ? ? ?...六,MMBE看库存,每个批次库存重量自动有批次库存个数乘以该批次的克重, ? 然后按G看库存,系统能根据批次克重自动换算成重量G, ?

    2K40

    OpenTelemetry:现代化IT系统架构中的关键组件

    在当今迅速发展的技术世界中,链路追踪技术已经发展多年,尤其在Java生态中表现出色。然而,随着OpenTelemetry的出现和发展,这项技术正变得更加通用和功能完善。...在本文中,我们将分析讨论为什么OpenTelemetry是现代化IT系统架构中不可或缺的一部分,以及它如何成为最佳选择。...二、OpenTelemetry在现代化IT系统中的作用 在现代化的IT架构中,分布式系统和微服务架构已成为常态。在这样的环境下,链路追踪和日志记录变得极为重要。...提高系统的可观测性 链路追踪:帮助开发者理解和优化服务间的交互。 日志记录:提供了对系统运行状态的深入洞察。 故障诊断和性能分析 快速定位问题:通过追踪数据,开发和运维团队可以迅速定位系统中的问题。...强大的社区和生态:得益于其开源性质,OpenTelemetry拥有强大的社区支持和不断更新的生态系统。 易于集成和扩展:开发者可以轻松地将其集成到现有系统中,且具有很高的扩展性。

    22210

    vue父组件中获取子组件中的数据

    name="'businessLicence'" size="350px*200px" ref="businessLicence"> 自己写了个上传图片的子组件...,父组件需要获取到子组件上传的图片地址, 方法一:给相应的子组件标签上加 ref = “avatar” 父组件在最后提交的时候获取this....$refs.avatar.相应数据 即可,因为在这里才能保证图片已经上传,否则如果图片没上传,拿到的值一定为空。...$emit方法获取的时候,如果子组件想要给父组件传入多个值,则可以写多个参数,父组件在获取的时候获取多个参数的值即可 //父组件 getUrl(path1,path2) { console.log...函数中让该函数加载即可 3、子组件向父组件传值需 是父组件 用到了 ,如果多个父组件引用了该子组件,则只有传值的时候用的子组件来自哪个父组件,这个父组件才可以接收到值,其他父组件获取不到子组件传的值。

    6.9K100
    领券