首页 > 其他分享 >CSS 尺寸单位

CSS 尺寸单位

时间:2023-02-08 11:48:02浏览次数:32  
标签:字体大小 cm px 单位 换算 尺寸 CSS

一、尺寸单位

CSS 支持多种尺寸单位,包括:

  1. px:像素,固定大小单位
  2. em:相对于当前元素字体大小的单位
  3. rem:相对于根元素(HTML)字体大小的单位
  4. %:相对于父元素的百分比单位
  5. vh:相对于视口高度的 1/100 单位
  6. vw:相对于视口宽度的 1/100 单位
  7. cm:厘米,实际尺寸单位
  8. mm:毫米,实际尺寸单位
  9. in:英寸,实际尺寸单位
  10. pt:磅,字体尺寸单位
  11. pc:pica,字体尺寸单位

您可以根据需要选择适当的单位来控制元素的大小和尺寸。不同的单位在不同的情况下适用性不同,因此需要根据需求选择合适的单位。

二、尺寸单位换算

以下是 CSS 中一些常见的尺寸单位换算:

  1. 1 in = 2.54 cm
  2. 1 cm = 10 mm
  3. 1 in = 72 pt
  4. 1 pc = 12 pt
  5. 1 cm = 28.346 pt
  6. 1 em = 当前字体大小(例如,如果字体大小为 16px,则 1em = 16px)
  7. 1 rem = 根字体大小(例如,如果根字体大小为 16px,则 1rem = 16px)
  8. 1 vh = 视口高度的 1/100
  9. 1 vw = 视口宽度的 1/100

请注意,不同的单位在不同的情况下适用性不同,因此需要根据需求选择合适的单位。此外,不同的浏览器可能对同一单位的实现不同,因此在开发过程中需要做好相应的兼容处理。

三、特定情况下的尺寸单位换算

1、cm 与 px 的换算

1 cm = 37.8 px(在 96 dpi 的屏幕上)

请注意,不同的屏幕密度(dpi)会导致不同的换算结果,因此通常建议使用 em 或 rem 单位来定义字体大小和元素大小,而不是使用实际尺寸单位(如 cm 或 in)。

2、in 与 px 的换算

1 in = 96 px(在 96 dpi 的屏幕上)

请注意,不同的屏幕密度(dpi)会导致不同的换算结果,因此通常建议使用 em 或 rem 单位来定义字体大小和元素大小,而不是使用实际尺寸单位(如 in 或 cm)。

 

标签:字体大小,cm,px,单位,换算,尺寸,CSS
From: https://www.cnblogs.com/yuzhihui/p/17101159.html

相关文章

  • css hover
     css hover<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>鼠标事件</title><style>.recommends-content-item{......
  • 第8课、元素定位-css语和jquery
                fromseleniumimportwebdriverimporttimefromselenium.webdriver.common.action_chainsimportActionChainsfromselenium......
  • django1.4设置模板路径和CSS,JS,image等路径的方法
    对于DJANGO这类MVC框架来说,路径问题可以称为一个谜一样的东西,很多人因为对路径不知道如何处理而觉得MVC实在是云里雾里不知所云。本文主要解决django中关于模板路径设置、CS......
  • 双人被子一般是多大尺寸
    双人被子尺寸一般是200cm×230cm。双人床的常规尺寸主要分为三种:1、标准双人床:尺寸一般在150cm×190cm。2、加大双人床:尺寸在180cm×200cm。3、加宽双人床:尺寸一般在200......
  • CSS3控制文字只显示一行超出部分显示省略号
    在编写网页的时候,我们希望文字不换行,特别是在新闻列表的时候,文字多了就添加省略号,不用程序去判断字符,英文和汉字的字符数量是不对应的,一个汉字占两个......
  • rem单位转换为px
    consttransform=(str,baseRem)=>{constreg=/((-?\.?\d+)(\.\d+)?)rem/g;returnstr.replace(reg,function(match,pos,orginText){constval=(pa......
  • Android中的显示单位
     px(pixels)像素    一般HVGA代表320x480像素,这个用的比较多。 dip或dp(deviceindependentpixels)设备独立像素  这个和设备硬......
  • CSS文本颜色和大小写转化
    CSS有很多用于格式化文本的属性。比如,文本的颜色、大小写转化、对齐方式、文本间距、文本装饰等等。(此时会同时演示几个案例)首先,我们来介绍CSS如何为文本添加颜色。通过声......
  • CSS3实现打勾(✔)效果
    CSS3实现打勾效果​​HTML主体​​​​我们看,这个效果的HTML结构​​​​属性:​​​​样式属性​​关于打勾✔效果,应该都不陌生。eg:我们在某些商场,支付的时候,支付成功会有......
  • css中文字体和Unicode编码转换方法
    在网站中,都不可避免的要用到一些中文字体,比如宋体,微软雅黑,黑体等,在css中写入中文的方法一般是:font-family:"微软雅黑","黑体";这样类似的表达方式。css样式文件也区分文......