文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS常用单位

CSS常用单位 CSS的长度单位主要有%、px、in、cm、ch、mm、ex、pt、pc、em、rem、vw、vh、vmin、vmax，按照单位的计算方式大致可以分为绝对长度单位、相对长度单位、百分比单位...绝对长度单位 px 像素 通常而言，一个CSS像素代表屏幕设备的一个像素点，但是对于高分辨率屏幕而言一个CSS像素往往占多个设备像素，也就是说有多个屏幕像素点来表示1px，1px = 1in / 96。...，但不同字体x的高度可能不同，对于很多字体来说1ex ≈ 0.5em，所以很多浏览器在实际应用中取em值一半作为ex值，ex单位在实际中常用于微调。...文字 文字 ch ch与ex类似，这一单位代表元素所用字体中0...vw: 相对于视窗的宽度，1vw等于视窗宽度的1%。 vmin: vw和vh中的较小值。 vmax: vw和vh中的较大值。

1.4K20
您找到你想要的搜索结果了吗？
是的
没有找到

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 的宽和高。

73720

CSS 中的相对单位

# 相对值的优势 CSS 为网页带来了后期绑定（late-binding）的样式：直到内容和样式都完成了，二者才会结合起来。这会给设计流程增加复杂性，而这在其他类型的图形设计中是不存在的。...我们无法根据理想的条件给元素添加样式，而是要设置无论元素处于任意条件，都能够生效的规则。 CSS 带来的抽象性也带来了额外的复杂性。相对单位就是 CSS 用来解决这种抽象的一种工具。...常用绝对长度单位 像素（px） 不常用绝对单位 毫米（mm) 厘米（cm） 英尺（in） 点（pt） 派卡，印刷术语（pc） 换算公式 1 in = 25.4 mm = 2.54 cm = 6 pc...在 CSS 中，1em 等于当前元素的字号，其准确值取决于作用的元素。 浏览器会根据相对单位的值计算出绝对值，称作计算值（computed value）。...视口的相对单位 vh: 视口高度的 1/100 vw：视口宽度的 1/100 vmin：视口宽、高中较小的一方的 1/100（IE9 中叫 vm，而不是 vmin） vmax：视口宽、高中较大的一方的

88220

【CSS】浅谈 CSS 中常用的相对长度单位 em, rem

浅谈CSS中常用的相对长度单位 顾名思义，相对单位是根据与其他事物的关系来度量。所以，要注意到，所度量的实际距离，可能会因为不在其控制之下的其他因素而改变。如屏幕分辨率、可视区域的宽高等等。...并且，对于某些相对单位，其大小会因使用该单位的元素的不同而不同。 em CSS中，em 被定义为给定字体的font-size值。如果一个元素的font-size为14px,那么1em=14px。...但是，我们前面说到，相对单位的大小会因为使用该单位的元素的不同而不同。...因此， 参考像素： 对于电脑显示器是0.26mm（即1/96英寸）； 对于激光打印机是0.20mm（假设阅读距离通常为55cm，即21英寸）； 在CSS中，建议采用96ppi作为参考像素，这是windows...机器常用的度量。

16520

CSS：绝对单位、相对单位

作者：Abudula__ 我们对单位很熟悉，比如说，千克，千米，米等，这些就是绝对单位，我们又有听到太阳的质量等于33个地球，这个就是相对单位。在CSS中，单位也可以分为这两类。...任何现代显示屏，不管是手机，平板，笔记本还是电视都是由成千上万的像素组成的，所以我们可以使用这些像素来定义长度。 另外 CSS 将光栅图像(如照片等)的显示方式定义为默认每一个图像大小为“1px”。...网页中我们很多时候都需要用到满屏，或者屏幕大小的一半等，尤其是移动端，屏幕大小各式各样，而这个时候我们现有的单位就显得有点捉襟见肘，于是就诞生了这四个单位。...vw：基于视窗的宽度计算，1vw 等于视窗宽度的百分之一 vh：基于视窗的高度计算，1vh 等于视窗高度的百分之一 vmin：基于vw和vh中的最小值来计算，1vmin 等于最小值的百分之一 vmax：...基于vw和vh中的最大值来计算，1vmax 等于最大值的百分之一 下面我们实例说明实现一个宽度为视窗宽度的 25%，高度为视窗高度 50% 的一个盒子： .box { height: 50vh; /

2K20

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

39510

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

37420

聊一聊CSS中的长度单位

绝对单位 绝对单位（px，cm， mm，in，Q，pt和pc）意味着以此为单位的长度值与其代表的物理长度相等，比如width: 1cm即与现实世界中的1cm长度相等，也意味着绝对单位在所有的媒介上的显示效果是一致的...但这是理想情况，受显示器和不同浏览器CSS实现的差异，在很多设备上绝对单位显示的并不精确。...下面贴出绝对单位直接的换算公式： 1in = 2.54cm = 25.4mm = 72pt = 6pc = 96px px 作为CSS中最常用的单位，关于px还是有必要多说两句的。...因为这一特性，rem现在被更广泛的应用于响应式设计。 ch ch用的表较少，是CSS3中新加入的单位，表示当前字体中的 "0" (零、unicode 字符 U+0030) 的宽度。...Viewport Based vw，wh，vmin，vmax 都是CSS3中新加入的单位。vw，vh可以根据视窗大小调整字体大小。vw是视窗的1/100的宽度，而vh是视窗1/100的高度。

1K70

CSS尺寸单位介绍

前端开发过程中，尺寸单位是我们必须用到的，下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍 在这之前，需要先对几个概念进行普及介绍 基本概念 （以下概念读起来可能有些晦涩，如果看不懂也没关系...css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。 在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。...在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。...就是我们开发过程中使用的css中的px 设备像素比（device pixel radio） 设备像素比 = 物理像素 / 设备独立像素，单位是dpr！...这时候rem出现了 rem rem 是CSS3的一个相对单位（root em，根em） 使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素 只要html的font-size大小不变

1.6K20

1.CSS单位-CSS进阶

一、CSS单位 1.绝对单位 在CSS中，绝对单位定义的大小是固定的。使用的是物理度量单位，显示效果不会受外界因素影响。 但绝对单位一般多用于传统平面印刷，而极少用于前端开发。...在前端开发中，都不会用到绝对单位。 2.相对单位 在CSS中，相对单位定义的大小是不固定的。...百分比单位例.png （4）em 在CSS中，em是相对于当前元素的字体大小而言。 其中，1em等于当前元素字体大小。此处的字体大小指的是以px为单位的font-size值。...使用em作为统一单位例2.png 在CSS中，em是相对于当前元素的字体大小而言。...rem 是CSS3新引入的单位，目前除了IE8及以前版本之外，大部分主流浏览器都是支持rem的。 rem 布局是移动端最常用的字体大小之一。

48321

CSS尺寸单位介绍

前端开发过程中，尺寸单位是我们必须用到的，下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍 在这之前，需要先对几个概念进行普及介绍 基本概念 （以下概念读起来可能有些晦涩，如果看不懂也没关系...css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。...在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。...就是我们开发过程中使用的css中的px 设备像素比（device pixel radio） 设备像素比 = 物理像素 / 设备独立像素，单位是dpr！...这时候rem出现了 rem rem 是CSS3的一个相对单位（root em，根em） 使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素 只要html的font-size大小不变

1.4K30

CSS中常见的长度单位

1.CSS中常见的长度单位 名称 英文全称 中文名 相对/绝对长度 换算 描述 % percentage 百分比 相对 原长度*百分数 px pixel 像素...（2）CSS中设置字体大小（font-size）请尽量使用em或者ex代替px，原因是用px做描述字体大小唯一的致命缺点就是在IE下无法用浏览器字体缩放的功能。 2....CSS3中新增的度量单位 （1）ch——字符0(零)的宽度； （2）rem——根元素(html元素)的em； （3）vw——viewpoint width，视窗宽度，1vw等于视窗宽度的1%；...（4）vh——viewpoint height，视窗高度，1vh等于视窗高度的1%； （5）vmin——vw和vh中较小的那个。...（2）rem单位感觉就是px+em的变体，是否值得使用还要看你自己的取舍：没有px精确也没有em灵活。 如果没有定义font-size怎么办？ （3）浏览器支持情况。

1.2K20

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

CSS给开发者提供了许多种长度单位，用于各种不同的CSS属性，如 margin， padding， line-height还有 font-size。为了满足不同的需求，我们有了各种各样的长度单位。...即使你可以给某一CSS属性赋予相同的值，其背后的计算逻辑也是不一样的。不同情况下，适用的长度单位是不同的。...它们常用在自适应网站设计中与根据不同的页面宽度断点设置不同的字体大小。...这个技巧在视窗单位的基础排版一文中有具体解释。 其他绝对值单位 CSS也允许其他很多绝对值单位，这些单位在屏幕排版的情况下使用较少，更多是用在传统的打印介质中。...有两种类型的关键字：绝对和相对的。绝对值关键字常用在指定字体大小，其值是根据不同的用户浏览器计算出的一个数据表里的某项。

2.3K20

css新单位vw,vh在响应式设计中的应用

考虑到未来响应式设计的开发，如果你需要，浏览器的高度也可以基于百分比值调整。...但使用基于百分比值并不总是相对于浏览器窗口的大小定义的最佳方式，比如字体大小不会随着你窗口改变而改变，如今css3引入的新单位明确解决这一问题。...View Demo css3引入的”vw”和”vh”基于宽度/高度相对于窗口大小，”vw”=”view width”, “vh”=”view height”; 以上我们称为视窗单位允许我们更接近浏览器窗口来定义大小...参照demo案例对照下面四个容器的css样式: .demo { width: 100vw; font-size: 10vw; /* 宽度为窗口100%， 字体大小为窗口的10% */ } ....目前这款css3的应用支持所有主流浏览器，IE必须10以上。

1K10

CSS入门13-单位详解

这些长度由数字和单位组成，数字和单位之间是没有空格的。长度单位的类型有两种：绝对长度单位和相对长度单位。 2. 绝对长度单位 绝对长度单位的含义，就是客观上绝对存在的单位，放在任何地方都一样。...3.1.2-2 3.1.3 ex ex是指所用字体中小写x的高度，不同字体x的高度可能不同。实际上，很多浏览器取em值一半作为ex值。 ex在实际中常用于微调。...3.1.4 ch ch与ex类似，被定义为数字0的宽度。当无法确定数字0宽度时，取em值的一半作为ch值。 IE8-不支持。 ch在实际中主要用于盲文排版。...(对于vmax，所有IE浏览器都不支持) 另外，黑莓错误的将其相对于视觉视窗来计算。而safari奇怪地相对于html元素来计算，如果html中增加了内容，这两个单位也会发生变化。...参考 runoob.com css单位 深入理解CSS中的长度单位

60620

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

在我们创建适合各种设备的响应式网站时，了解正确的CSS 单位很重要。不过在深入研究决策之前，让我们先对它们进行分类以便了解它们的用途。 如何决定响应式网站的 CSS 单位？...如果未覆盖，默认字体大小为 16px，假设在父元素中字体大小为 48px，那么在子元素中为 1em == 48px。...概括总结 px单位常用于边框。 % 单位相对于相对父级的宽度。 em 单位相对于元素字体大小的边距和填充 。 rem 单位相对于根的字体大小 。...vw 和 vh 表示相对于根的宽度和高度。 这些是 6 个 css 单元，它们最常用于使网站具有响应性。...我已经写了很长一段时间的技术博客，并且主要通过CSDN发表，这是我的一篇 响应式网站的 CSS 单位教程。我喜欢通过文章分享技术与快乐。

91610
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券