CSS 你到底有多少长度单位?

CSS 你到底有多少长度单位?

博客链接 欢迎来访~

听说糙着干活的只靠 px% 闯天下,不知道在看文章的你是不是也是其中一员,哈哈哈哈

都 9102 年了,移动端 emrem 霸占天下,总会有人问你两者的区别;vwvh 也展露头角,拥护者与日俱增;css3 中还有新增的计算函数 calc() ,又或是 CSS 变量再配合 JS,真的是越来越强大了!

em 和 rem

em 和 rem 是配合 flexible 方案非常火的一种相对单位, 虽然该方案已经凉了,但依然是当前兼容性最好的可伸缩布局方案。

从 em 和 rem 的含义上来说,

  • 1em 表示与当前元素字体的宽度,准确来说是一个大写字母M的宽度

  • 1rem 则表示默认字体大小的宽度,同样实质上也是一个大写字母M的宽度

两者的差别只是 rem 总是以根节点 (html) 的字体大小作为参考,你看命名 rem 就是 root em,而 em 则以当前元素的字体大小作为参考。

而 flexible 方案的实质,就是 hack 实现根据不同设备 dpr ,动态改写 标签以及 标签的 data-dpr 属性 和 font-size 值。这样达到的效果就是不同设备分辨率下界面上内容是完全等比缩放的。

 

另外同样以相对字体大小的单位还有 exch,虽然它们两位一般不被使用 ..

  • 1ex 表示一个小写字母 x 的高度。但它的表现不像 em 那样稳定, 比如在 IE 下 ex 正好是 em 的一半,在火狐下更接近字体的实际高度,所以我们一半认为 ex ≈ em / 2 。

  • 1ch 表示一个数字 0 的宽度

 

它们的兼容性如下

视口比例单位 vh、vw、vmin、vmax

css3 中新增了和 Viewport 相关的四个单位,随着时间推移,目前各浏览器环境也能跟上了,这也是当前/未来最建议的在伸缩方案中用的单位。前面提到的 flexible 方案也正是对低版本环境兼容视口比例方案的一种 JS hack 方案。

  • 1vw 表示视口宽度的 1/100

  • 1vh 表示视口高度的 1/100

  • 1vmin 取 1vm 和 1vh 较小的一者

  • 1vmax 取 1vm 和 1vh 较大的一者

视口宽高对应 window.innerWdithwindow.innerHeight

而当前的兼容性如下:

CSS3 其他新特性的搭配使用

从几个案例来研究下

1. 搭配 calc() 计算

.box {
    width: calc(100vw - 40px);
    padding: 0 20px;
    box-sizing: border-box;
}
复制代码

2. CSS 变量 与 JS 搭配使用

切换主题直接改 css 中的变量

function changeTheme (color) const docStyle = document.documentElement.style; docStyle.setProperty('--theme-color', color); } 复制代码
--theme-color: '#fff'

.some-dom {
    color: var(--heme-color);
}
复制代码

绝对单位

在绝对单位中,最常用的一定是 px 了,它究竟为什么如此好用?它到底是绝对单位还是相对单位?

px 我们称之为像素,即屏幕图形显示的一个点(最小单位),这个点有它的位置、颜色等信息,从这个意义上来说 px 是绝对单位;但每一屏幕上的最小单位1像素对应物理单位是可以变化的,比如1px=1mm、1px=1cm,这取决于设备,所以也会有说它是相对单位的情况。

 

其他绝对单位还有:

  • mm 毫米
  • cm 厘米
  • in 英寸(2.54厘米)
  • pt 磅(1/72 英寸)
  • pc 12 点活字 (1 pc 等于 12 点)

通常来说这些绝对单位用于打印一类现实物质的尺寸需求

总结

实际项目中,我们不可能也不应该仅使用单一的单位来处理所有的细节,充分认识各单位的意义,合理结合才是最好的。

等比伸缩布局不是万能的,让 ipad 和 iphone 显示完全一样的等比放大的内容本身就是偷懒的方案,如何设计好自适应和响应式的结合是产品线从设计开始就得考虑的内容。

em 方案和 vxx 方案总归要从设计稿的 px 换算到单位,实际开发中精细的调节还是得靠 px ,最后才再换算过去,不如直接规范好设计稿、做好代码转化插件,代码全用 px ,流程化搞定单位问题。

参考资料

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/100994.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 计算机负数补码_负数用补码表示如何理解

    计算机负数补码_负数用补码表示如何理解在计算机系统中,数值一律用补码来表示(存储)。主要原因:使用补码,可以将符号位和其它位统一处理;同时,减法也可按加法来处理。另外,两个用补码表示的数相加时,如果最高位(符号位)有进位,则进位被舍弃。2、补码与原码的转换过程几乎是相同的。数值的补码表示也分两种情况:(1)正数的补码:与原码相同。例如,+9的补码是00001001。(2)负数的补码:符号位为1

    2022年10月31日
  • 计算机ATA考试详细讲解

    计算机ATA考试详细讲解国计算机信息高新技术考试(CITT)是原劳动部根据中央有关稳妥发展劳动力市场、积极进行职业技能鉴定工作的有关精神,为了适应社会发展和科技进步的需要,提高劳动力素质和促进就业,加强计算机信息技术领域新职业、新工种职业技能的培训考核工作,于1996年,以”劳部发[1996]19号”文件《关于开展计算机信息高新技术培训考核工作的通知》,由劳动和社会保障部职业技能鉴定中心,在全国范围内统一组织实施的社会化职业技能考试。整个考试由劳动保障部职业技能鉴定中心负责题库管理、各省(自治区、直辖市)负责考试的组织、考试站负责

  • 我的收藏夹:)

    我的收藏夹:)

  • C3P0连接池的配置与使用[通俗易懂]

    C3P0连接池的配置与使用[通俗易懂]1、下载c3p0-0.9.1.2.jar下载地址:http://download.csdn.net/detail/chunxiaqiudong5/96619222、添加配置文件c3p0-config.xml3、配置文件内容如下:1030100

  • python判断文件后缀_Python 判断文件后缀是否被篡改

    python判断文件后缀_Python 判断文件后缀是否被篡改自己用Python写了个对文件后缀判断的脚本,目前支持的文件类型还不是很多,还有待完善。支持MicrosoftOffice(.pptx.docx.xlsx)Pyhton版本为3.6#!usr/bin/envpython#-*-coding:UTF-8-*-#@Time:2018/7/1015:16#@Author:gumguiimportstructimportos,sy…

  • 如何开发一个接口_网站接口开发

    如何开发一个接口_网站接口开发1、客户端请求加密、服务端请求解密2、防止重复提交一般是在数据库加状态,在status=0的状态下更新,更新完状态变为1,这样就可以防止重复提交———————————————————————————签名基本原理是通过key/secret的实现:1,服务器……

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号