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

CSS文字大小单位px、em、pt(转)

IE无法调整那些使用px作为单位的字体大小;   2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位;   3....比如说你#content声明了字体大小为1.2em,那么声明p的字体大小时就只能是1em,不是1.2em, 因为此em非彼em,它因继续#content的字体高变为了1em=12px。   ...但是12px汉字例外,就是由以上方法得到的12px(1.2em)大小的汉字IE并不等于直接用12px定义的字体大小,而是稍大一点。...单位pt的说明   印刷排版,point是一个绝对值,它等于1/72英寸,可以用尺子丈量的,物理的英寸。但是csspt含义却并非如此。...但是网页主要为了屏幕显示,不是为了打印等其他需要的。px能够精确地表示元素屏幕的位置和大小。   当然。dpi是96的情况下,9pt=12px

1.6K20

分享:CSS长度单位:pxpt的区别

先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点;pt就是point,是印刷行业常用单位,等于1/72英寸。...因此就有这样的说法,在网页设计,pixel是相对大小point是绝对大小。...另外,电脑有其自身的调节性,用户可以自己来调节:1)浏览器调节字体大小;2)刚才提到的显示属性里调节。 那页面设计到底是用px还是pt呢?...因为当网页的字体没有给出实际的pxpt定义的话,会有一个默认值:12pt即16px,对应浏览器字体大小的“中等”,以这个为标准,变大或缩小。...参考大部分大型网站,包括Adobe和Microsoft,都是使用px作为单位,而且HTML,默认的单位就是px,是不是也暗示着px是网页设计的“内定单位”?

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

    【说站】css样式单位px,em,pt,ex,pc,in,mm,cm详解

    写css样式的时候最常用的长度单位是px(像素),除此之外经常会碰到em、pt等等。...1、px像素(Pixel),相对于设备的长度单位,像素是相对于显示器屏幕分辨率而言的。譬如,WONDOWS的用户所使用的分辨率一般是96像素/英寸。...MAC的用户所使用的分辨率一般是72像素/英寸。 像素px)是相对于观看设备的。对于低 dpi 的设备,1px 是显示器的一个设备像素(点)。对于打印机和高分辨率屏幕,1px 表示多个设备像素。...css容器的大小我们经常用px做单位;字体大小(font-size)很多人用px做单位,其实用px做字体单位唯一的致命缺点就是IE下无法用浏览器字体缩放的功能。 2、em:相对长度单位。...相对于元素的字体大小(font-size),如果当前行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。3em 表示当前字体大小的 3 倍 3、pt:点(Point),绝对长度单位。

    2.5K21

    移动应用界面设计的尺寸规范「建议收藏」

    e、字体大小 Android规范的要求如下: 前面提到Android开发的字号单位是sp,换算关系是 sp*ppi/160 = px 。...作为对照,正文样式大字号下使用 34 点字体大小作为默认文字大小设置。 – 通常来说,每一档文字大小设置的字体大小和行间距的差异是 2 点。...例外情况是两个标题样式,最小、小和中等设置时都使用相同字体大小、行间距和字间距。 – 最小的三种文字大小,字间距相对宽阔;最大的三种文字大小,字间距相对紧密。...– 标题和正文样式使用一样的字体大小。为了将其和正文样式区分,标题样式使用加粗效果。 – 导航控制器的文字使用和大号的正文样式文字大小(明确来说,是 34 点)。...– 文本通常使用常规体和中等大小不是用细体和粗体。 百度用户体验做过的一个小调查: 单位:像素px 还有个方法就是找你觉得好的APP应用,手机截图后放进PS自己对比调节字体大小

    4.8K20

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

    具体单位以及解释如下: px像素:一个像素就相当于我们屏幕的一个小点,屏幕实际就是由很多个像素点构成的,不同显示器像素大小不同,像素越小,显示效果就越好。 cm厘米:这个单位大家常见,不解释。...in英寸:1in = 96px = 2.54cm ptpoint 。1in = 72pt pc:pica。1pc = 12pt 相对长度 %百分比:浏览器根据其父级元素的样式来计算值。...em:相对于当前元素的字体大小来计算值,一般浏览器字体大小默认为16px,则2em = 32px rem:rem是根em(root em)的缩写,rem作用于非根元素时,相对于根元素字体大小;作用于根元素字体大小时...,相对于初始字体大小。...浏览器默认字体大小是16px,所以:1rem = 16px

    44010

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

    具体单位以及解释如下: px像素:一个像素就相当于我们屏幕的一个小点,屏幕实际就是由很多个像素点构成的,不同显示器像素大小不同,像素越小,显示效果就越好。 cm厘米:这个单位大家常见,不解释。...in英寸:1in = 96px = 2.54cm ptpoint 。1in = 72pt pc:pica。1pc = 12pt 相对长度 %百分比:浏览器根据其父级元素的样式来计算值。...em:相对于当前元素的字体大小来计算值,一般浏览器字体大小默认为16px,则2em = 32px rem:rem是根em(root em)的缩写,rem作用于非根元素时,相对于根元素字体大小;作用于根元素字体大小时...,相对于初始字体大小。...浏览器默认字体大小是16px,所以:1rem = 16px

    38920

    【总结】移动应用界面设计的尺寸设置及规范

    iPhone界面上元素的定位、尺寸是通过一个单位point,而非px,屏幕上固定有320x480pt,retina屏两倍的分辨率改变的只是ptpx之间的比例而已,这样就能实现不改变程序,只上传两套图片就兼容两个分辨率...作为对照,正文样式大字号下使用 34 点字体大小作为默认文字大小设置。 – 通常来说,每一档文字大小设置的字体大小和行间距的差异是 2 点。...例外情况是两个标题样式,最小、小和中等设置时都使用相同字体大小、行间距和字间距。 – 最小的三种文字大小,字间距相对宽阔;最大的三种文字大小,字间距相对紧密。...– 标题和正文样式使用一样的字体大小。为了将其和正文样式区分,标题样式使用加粗效果。 – 导航控制器的文字使用和大号的正文样式文字大小(明确来说,是 34 点)。...– 文本通常使用常规体和中等大小不是用细体和粗体。 百度用户体验做过的一个小调查: 单位:像素px ? 还有个方法就是找你觉得好的APP应用,手机截图后放进PS自己对比调节字体大小

    3.5K40

    CSS 的各种单位

    之前遇到 css 需要使用单位的情况,都草草用 px 或者百分比糊弄过去,导致当需要做一个响应式的页面的时候,要重新补一下 css 单位的技术债。...px px 是 css 中最常用的字体大小单位。...px 就是表示 pixel,像素,是屏幕上显示数据的最基本的点;还有一个看起来很像的单位 ptpt 就是 point,是印刷行业常用单位,等于1/72英寸,一般在打印的时候使用。...14px * 1.5 = 21px 通常写 html 的时候会发生很多嵌套,每个节点都从父节点继承字体大小,这样很难控制每个层级的字体大小。...百分比 css 的百分比是一种相对值,使用百分比的关键是找到它的参照物。 属性 参照 width & height 宽和高使用百分比值时,其参照一般都是父元素的 content 的宽和高。

    78820

    聊一聊CSS的长度单位

    有的是日常生活中使用的单位,比如:厘米(cm)和英寸(in);有的是印刷行业使用的单位,比如:pointpt)和pica(pc);有的是专门为CSS发明的单位,比如:px。...因为px和in的关系为1in=96px低分辨率设备上,1px为1像素(pixel,也是px名称的由来)长度,低分辨率的屏幕上1px往往大于1/96in,所以从px计算得到的其他绝对单位值都不准确...px的特点可以归纳如下: 低分辨率设备上,1px = 1像素高分辨率设备上,1px = 1/96in,1px不一定等于1像素(比如4.7英寸的iphone上 1px=2像素); 对于图片显示,1px...rem CSS2013年创造出了一个新的单位rem,rem表示的是根元素(html元素的)字体大小每个元素里面em都可能不一样,但是rem都是一致的。...Viewport Based vw,wh,vmin,vmax 都是CSS3新加入的单位。vw,vh可以根据视窗大小调整字体大小。vw是视窗的1/100的宽度,vh是视窗1/100的高度。

    1.1K70

    pt、rpx、px、em、rem、%、vh、vw的区别

    前端有很多尺寸单位,比如: pt、rpx、px、em、rem、%、vh、vw等,我们需要深入了解它们的工作原理和使用情况。...px通常用于精确控制图像的大小和布局,特别是需要保持一致性的设计。2. em:em是相对单位,其值是相对于元素的父元素的字体大小而言。...例如,如果父元素的字体大小是16px,1em等于16px,如果在一个嵌套的子元素中使用1em,它将等于16px * 子元素字体大小。...根元素通常是HTML文档的标签,它的字体大小可以CSS设置。rem非常适合响应式设计,因为它不会受到嵌套元素的影响。...Web设计pt不常用,因为Web页面通常以屏幕为基础,不是印刷媒体。使用pt可能会导致不一致性,因为不同设备和浏览器的像素密度不同。

    1.7K30

    CSS中常见的长度单位

    1.CSS中常见的长度单位 名称 英文全称 中文名 相对/绝对长度 换算 描述 % percentage 百分比 相对 原长度*百分数 px pixel 像素...) mm millimeter 毫米 cm centimeter 厘米 pt point 磅 1pt=1/72in≈0.3527mm 磅一般为重量单位,但是印刷行业可作为长度单位...字体大小是指字屏幕或印刷介质上表现出来的大小,将每个字看作方块,按方块的对角线长度计算大小。...(2)CSS设置字体大小(font-size)请尽量使用em或者ex代替px,原因是用px做描述字体大小唯一的致命缺点就是IE下无法用浏览器字体缩放的功能。 2....(2)rem单位感觉就是px+em的变体,是否值得使用还要看你自己的取舍:没有px精确也没有em灵活。 如果没有定义font-size怎么办? (3)浏览器支持情况。

    1.2K20

    为什么你永远不应该在CSS中使用px来设置字体大小

    Josh Collinsworth的博客文章“永远不要用px作为字体大小,作者讨论了为什么不应该使用像素px)作为网页字体大小的单位[1]。...所以现在, 1px 通常对应于放大的“缩放”像素大小不是实际硬件上的字面像素。...一个例子:iPhone 14 Pro 上的像素非常微小,16px 字面上的设备像素大小大约相当于2pt字号的印刷字体大小。好在浏览器为我们缩放了它们!...排版上,一个 em 等于当前字体大小。 如果你将字体大小设置为 32pt(“pt”是另一个仍然有时使用的旧排版术语),那么 1em 就是32pt。...简而言之:媒体查询,除非您确定自己知道浏览器设置自己的字体大小会对用户产生什么影响,否则一定要避免使用 px

    1.8K20

    揭秘PhotoShop的点与像素

    我们今天一起来揭秘点(pt)与像素(px) “点”和“像素”的关系 px = pt * DPI / 72 换句话说,72dpi的分辨率情况下(72dpi也是网站设计中最常见的分辨率),pt(点)与px...使用px定义文字,无论用户怎么设置,都不会改变大小使用pt定义文字,数值越大,字体就越大。 不同的分辨率下,同样点数的字体大小不同 不同分辨率的PSD文件当中,同样点数的文字,字体大小不同。...但是同样像素的文字,字体大小保持不变。一起来看比较图: ? 如上的三组文字,“H5”均设置的是30点;“HTML5学堂”均设置的是30像素。...前端攻城狮,通常并不会对自己的PS做首选项设置(通俗的说,就是设计师的设计文件,字体以px为单位,攻城狮使用PS打开文件的时候,默认字体以pt为单位。...选择菜单的“编辑”——>“首选项”——>“单位与标尺” 然后将文字的单位选择为“像素”即可 此时原有的点会被换算为字体像素大小哦~!如图: 改变单位之前(单位使用点-pt时) ?

    4K50

    一文读懂 CSS 单位

    使用 em 和 rem 可以让我们灵活的够控制元素整体的放大和缩小,不是固定大小。那何时应使用 em,何时应使用 rem 呢?...绝对单位 CSS ,绝对单位包括:pxpt 、pc、 cm 、 mm 、in 等。绝对单位是一个固定的值,它反应了一个真实的物理尺寸。它不会受屏幕大小或者字体的影响。...这些绝对单位的换算关系如下: 1in = 25.4mm = 2.54cm = 6pc = 72pt =96px (1)px px 全称为 Pixels,表示像素,它并不严格等于显示器的像素,尤其高清屏下....box { width: 100px; height: 100px; } (2)pt pt 全称为 Point,表示点。...当使用这个单位时,无论显示器的分辨率是多少,打印纸上的结果都是一样的。 如果单纯为了网页的显示,建议就使用px像素单位,如果需要输出印刷产品,就可以考虑使用pt

    79610

    iPhone屏幕分辨率及适配技术

    逻辑分辨率和物理分辨率 逻辑分辨率以pointpt)为单位,物理分辨率以pixel(px)为单位。 区分逻辑分别率和物理分辨率是因为早期iPhone 3GS之前,iOS绘制图形以point为单位。...在这个时期point和pixel严格对应在一起。iPhone 3GS上:1 pt = 1 px。到了iPhone 4开始,苹果引入了Retina屏幕。一定物理单位内可以显示2倍的像素。...iPhone 4和iPhone 6上的显示大小是一样的。 如果使用逻辑像素 所幸的是,我们看到的是iPhone 3GS和iPhone 4的逻辑像素point)是一致的。...如果使用逻辑像素,100pt的正方形不同手机下打开的效果是如何的。 ? 好了,可以看到100pt的正方形在所有屏幕上看起来大小都一样了。...通过测试,iPhone的字体大概20px~36px时(排除某些特殊的设计),会得到比较良好的阅读体验。保持字体大小在一定范围内,就是为了保证阅读起来比较舒服。 ?

    3.7K20

    IT课程 CSS基础 021_值类型、单位、大小、颜色

    数值类型 CSS 不同属性中使用了不同的数值,常用的数值类型如下: 字符串:用单引号或双引号括起来的文本,需确保字符串引号的一致性。 数字:整数或浮点数。如 1024、-100、0.255。...长度单位: CSS,长度单位用于表示尺寸和距离,可以应用于各种属性,如宽度、高度、边距、填充等。 相对长度单位: em: 相对于父元素的字体大小。...1.5em表示元素的字体大小为其父元素字体大小的 1.5 倍。 rem: 相对于根元素(html元素)的字体大小。1rem等于根元素的字体大小。 ex: 通常用于垂直尺寸,相对于小写字母”x”的高度。...: 2rem; /* 2rem相当于32px */ height: 2ex; /* 高度为字体大小的一半,即 8px,相当于16px */ } 绝对长度单位: px像素是屏幕上最基本的单位,也是...pt: 点/磅 (point) 的缩写,是传统印刷术中使用的单位。1pt 等于 1/72 英寸,约为 0.352778 毫米。 pc: 派卡 (pica) 的缩写,也是传统印刷术中使用的单位。

    9910

    CSS新特性的知识

    px是pixel缩写,是基于像素的单位.浏览网页过程,屏幕上的文字、图片等会随屏幕的分辨率变化变化,一个100px宽度大小的图片,800×600分辨率下,要占屏幕宽度的1/8,但在1024×768...ptpoint(磅)缩写,是一种固定长度的度量单位,大小为1/72英寸。...如果在web上使用pt做单位的文字,字体的大小不同屏幕(同样分辨率)下一样,这样可能会对排版有影响,但在Word中使用pt相当方便。因为使用Word主要目的都不是为了屏幕浏览,而是输出打印。...通常1em=16px(浏览器默认字体大小16px),em是指父元素的字体大小。...rem:rem是CSS新增的,em是相对于其父元素来设置字体大小的,这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小多次使用时,就会带来无法预知的错误风险。

    51510

    响应式网站应该如何选择 CSS 单位?

    在做具体的决策之前,我们对它们先分个类: 绝对单位 px - 像素:1px = 1/96th of 1in pt - 点:1pt = 1/72th of 1in pc - 十二点活字:1pc = 1/16th...vw vh vmax vmin em rem - 根 em 相对于字体大小 相对于查看端口/文档 下面是一些最常见的单位: px 绝对像素单位仅用于屏幕(界面),其余单位用于打印。...em em 总是相对于它的直接父级的字体大小。1em == 父字体大小大小。如果没有覆盖,默认字体大小为 16px,假设在父元素字体大小为 48px,然后子元素为 1em == 48px。...* now 1em == 48px */ } 我们可以将这个单元用于边距和填充,因为它可以让我们根据元素的字体大小框周围使用灵活的间距。...因此,元素 font-size 会根据设备大小变化,元素周围的间距也将分别发生变化。 rem r 代表根 em,与 em 不同,它总是相对于根字体大小,无论它的下一个父元素具有什么字体大小

    1.9K10
    领券