先搞清基本概念：px就是表示pixel，像素，是屏幕上显示数据的最基本的点；而pt就是point，是印刷行业常用单位，等于1/72英寸。...因此就有这样的说法，在网页设计中，pixel是相对大小，而point是绝对大小。...另外，电脑有其自身的调节性，用户可以自己来调节：1）在浏览器中调节字体大小；2）在刚才提到的显示属性里调节。 那在页面设计中到底是用px还是pt呢？...因为当网页中的字体没有给出实际的px或pt定义的话，会有一个默认值：12pt即16px，对应浏览器中“字体大小”中的“中等”，以这个为标准，变大或缩小。...参考大部分大型网站，包括Adobe和Microsoft，都是使用px作为单位，而且在HTML中，默认的单位就是px，是不是也暗示着px是网页设计的“内定单位”？
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英寸,可以用尺子丈量的,物理的英寸。但是在css中pt含义却并非如此。...但是网页主要为了屏幕显示，而不是为了打印等其他需要的。而px能够精确地表示元素在屏幕中的位置和大小。 当然。在dpi是96的情况下，9pt=12px。
在写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)，绝对长度单位。
e、字体大小 Android规范中的要求如下： 前面提到Android开发中的字号单位是sp，而换算关系是 sp*ppi/160 = px 。...作为对照，正文样式在大字号下使用 34 点字体大小作为默认文字大小设置。 – 通常来说，每一档文字大小设置的字体大小和行间距的差异是 2 点。...例外情况是两个标题样式，在最小、小和中等设置时都使用相同字体大小、行间距和字间距。 – 在最小的三种文字大小中，字间距相对宽阔；在最大的三种文字大小中，字间距相对紧密。...– 标题和正文样式使用一样的字体大小。为了将其和正文样式区分，标题样式使用加粗效果。 – 导航控制器中的文字使用和大号的正文样式文字大小（明确来说，是 34 点）。...– 文本通常使用常规体和中等大小，而不是用细体和粗体。 百度用户体验做过的一个小调查： 单位：像素px 还有个方法就是找你觉得好的APP应用，手机截图后放进PS自己对比调节字体大小。
具体单位以及解释如下： px像素：一个像素就相当于我们屏幕中的一个小点，屏幕实际就是由很多个像素点构成的，不同显示器像素大小不同，像素越小，显示效果就越好。 cm厘米：这个单位大家常见，不解释。...in英寸：1in = 96px = 2.54cm pt：point 。1in = 72pt pc：pica。1pc = 12pt 相对长度 %百分比：浏览器根据其父级元素的样式来计算值。...em：相对于当前元素的字体大小来计算值，一般浏览器字体大小默认为16px，则2em = 32px rem：rem是根em(root em)的缩写，rem作用于非根元素时，相对于根元素字体大小；作用于根元素字体大小时...，相对于初始字体大小。...浏览器默认字体大小是16px,所以：1rem = 16px。
在iPhone界面上元素的定位、尺寸是通过一个单位point，而非px，屏幕上固定有320x480pt，retina屏两倍的分辨率改变的只是pt和px之间的比例而已，这样就能实现不改变程序，只上传两套图片就兼容两个分辨率...作为对照，正文样式在大字号下使用 34 点字体大小作为默认文字大小设置。 – 通常来说，每一档文字大小设置的字体大小和行间距的差异是 2 点。...例外情况是两个标题样式，在最小、小和中等设置时都使用相同字体大小、行间距和字间距。 – 在最小的三种文字大小中，字间距相对宽阔；在最大的三种文字大小中，字间距相对紧密。...– 标题和正文样式使用一样的字体大小。为了将其和正文样式区分，标题样式使用加粗效果。 – 导航控制器中的文字使用和大号的正文样式文字大小（明确来说，是 34 点）。...– 文本通常使用常规体和中等大小，而不是用细体和粗体。 百度用户体验做过的一个小调查： 单位：像素px ? 还有个方法就是找你觉得好的APP应用，手机截图后放进PS自己对比调节字体大小。
有的是日常生活中使用的单位，比如：厘米（cm）和英寸（in）；有的是印刷行业使用的单位，比如：point（pt）和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 CSS在2013年创造出了一个新的单位rem，rem表示的是根元素（html元素的）字体大小，在每个元素里面em都可能不一样，但是rem都是一致的。...Viewport Based vw，wh，vmin，vmax 都是CSS3中新加入的单位。vw，vh可以根据视窗大小调整字体大小。vw是视窗的1/100的宽度，而vh是视窗1/100的高度。
之前遇到 css 中需要使用单位的情况，都草草用 px 或者百分比糊弄过去，导致当需要做一个响应式的页面的时候，要重新补一下 css 单位的技术债。...px px 是 css 中最常用的字体大小单位。...px 就是表示 pixel，像素，是屏幕上显示数据的最基本的点；还有一个看起来很像的单位 pt，pt 就是 point，是印刷行业常用单位，等于1/72英寸，一般在打印的时候使用。...14px * 1.5 = 21px 通常写 html 的时候会发生很多嵌套，每个节点都从父节点继承字体大小，这样很难控制每个层级的字体大小。...百分比 css 中的百分比是一种相对值，使用百分比的关键是找到它的参照物。 属性 参照 width & height 宽和高在使用百分比值时，其参照一般都是父元素的 content 的宽和高。
前端有很多尺寸单位，比如: pt、rpx、px、em、rem、%、vh、vw等，我们需要深入了解它们的工作原理和使用情况。...px通常用于精确控制图像的大小和布局，特别是在需要保持一致性的设计中。2. em：em是相对单位，其值是相对于元素的父元素的字体大小而言。...例如，如果父元素的字体大小是16px，1em等于16px，如果在一个嵌套的子元素中使用1em，它将等于16px * 子元素字体大小。...根元素通常是HTML文档的标签，它的字体大小可以在CSS中设置。rem非常适合响应式设计，因为它不会受到嵌套元素的影响。...在Web设计中，pt不常用，因为Web页面通常以屏幕为基础，而不是印刷媒体。使用pt可能会导致不一致性，因为不同设备和浏览器的像素密度不同。
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）浏览器支持情况。
而取得的宽高维度是以像素为单位(Pixel) ，“像素”所指的是“绝对像素”而非“相对像素”。...不同设备有不同的显示效果,这个和设备硬件有关，一般我们为了支持WVGA、HVGA和QVGA 推荐使用这个，不依赖像素。 px: pixels(像素)....pt: point，是一个标准的长度单位，1pt＝1/72英寸，用于印刷业，非常简单易用； sp: scaled pixels(放大像素)....dp（与密度无关的像素）：一种基于屏幕密度的抽象单位。在每英寸160点的显示器上，1dp = 1px。 dip：与dp相同，多用于android/ophone示例中。...sp（与刻度无关的像素）：与dp类似，但是可以根据用户的字体大小首选项进行缩放。
在Josh Collinsworth的博客文章“永远不要用px作为字体大小”中，作者讨论了为什么不应该使用像素（px）作为网页字体大小的单位[1]。...所以现在， 1px 通常对应于放大的“缩放”像素的大小，而不是实际硬件上的字面像素。...一个例子：iPhone 14 Pro 上的像素非常微小，16px 在字面上的设备像素大小大约相当于2pt字号的印刷字体大小。好在浏览器为我们缩放了它们！...在排版上，一个 em 等于当前字体大小。 如果你将字体大小设置为 32pt（“pt”是另一个仍然有时使用的旧排版术语），那么 1em 就是32pt。...简而言之：在媒体查询中，除非您确定自己知道在浏览器中设置自己的字体大小会对用户产生什么影响，否则一定要避免使用 px 。
我们今天一起来揭秘点(pt)与像素(px) “点”和“像素”的关系 px = pt * DPI / 72 换句话说，在72dpi的分辨率情况下（72dpi也是网站设计中最常见的分辨率），pt（点）与px...使用px定义文字，无论用户怎么设置，都不会改变大小；使用pt定义文字，数值越大，字体就越大。 不同的分辨率下，同样点数的字体大小不同 在不同分辨率的PSD文件当中，同样点数的文字，字体大小不同。...但是同样像素的文字，字体大小保持不变。一起来看比较图： ? 如上的三组文字，“H5”均设置的是30点；“HTML5学堂”均设置的是30像素。...而前端攻城狮，通常并不会对自己的PS做首选项设置（通俗的说，就是设计师的设计文件中，字体以px为单位，而攻城狮使用PS打开文件的时候，默认字体以pt为单位。...选择菜单中的“编辑”——>“首选项”——>“单位与标尺” 然后将文字的单位选择为“像素”即可 此时原有的点会被换算为字体像素大小哦~！如图： 改变单位之前（单位使用点-pt时） ?
使用 em 和 rem 可以让我们灵活的够控制元素整体的放大和缩小，而不是固定大小。那何时应使用 em，何时应使用 rem 呢？...绝对单位 在 CSS 中，绝对单位包括：px 、pt 、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。
逻辑分辨率和物理分辨率 逻辑分辨率以point（pt）为单位，物理分辨率以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时（排除某些特殊的设计），会得到比较良好的阅读体验。保持字体大小在一定范围内，就是为了保证阅读起来比较舒服。 ?
数值类型 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) 的缩写，也是传统印刷术中使用的单位。
px是pixel缩写，是基于像素的单位.在浏览网页过程中，屏幕上的文字、图片等会随屏幕的分辨率变化而变化，一个100px宽度大小的图片，在800×600分辨率下，要占屏幕宽度的1/8，但在1024×768...pt是point(磅)缩写，是一种固定长度的度量单位,大小为1/72英寸。...如果在web上使用pt做单位的文字，字体的大小在不同屏幕（同样分辨率）下一样，这样可能会对排版有影响，但在Word中使用pt相当方便。因为使用Word主要目的都不是为了屏幕浏览，而是输出打印。...通常1em=16px（浏览器默认字体大小16px），em是指父元素的字体大小。...rem：rem是CSS新增的，em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在多次使用时，就会带来无法预知的错误风险。
在Android中使用DisplayMetrics中的densityDpi字段表示该值，并且不少文档中常用dpi来简化或者指代densityDpi。..., 在使用过程中发现1pt变现为6px, 也就是突然变大了, 你就知道pt失效导致的.自己去找原因并解决....适配后的 xdpi= 72f * 设备真实宽(单位px) / 设计图宽度，接下来只需要把我们计算好的 density 在系统中修改下即可 final Point size = new Point...pt作为长度单位，按照上述想法将其重定义为与屏幕大小相关的相对单位，不会对dp等常用单位的使用造成影响。...如果需要在代码中动态转换成px的话，使用TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PT, value, metrics) 预览。
在做具体的决策之前，我们对它们先分个类： 绝对单位 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 不同，它总是相对于根字体大小，无论它的下一个父元素具有什么字体大小。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
