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)


相关推荐

  • Java IO 和 NIO的区别

    Java IO 和 NIO的区别主要区别IONIO面向字节流面向缓冲区阻塞基于Selector的非阻塞JavaIO和NIO的主要区别体现在以上两个方面,以下详细说明这些区别的具体含义。面向流和面向缓冲区这个概念和编程方法中的面向过程、面向对象类似。JavaIO是面向流的而JavaNIO是面向缓冲区的。在JavaIO中读取数据和写入数据是面向流(Stream)的,这表示当我们从流中读取数据,写入数据时也将其写入流,流…

  • Google Earth Engine学习笔记——介绍和入门

    Google Earth Engine学习笔记——介绍和入门   最近接触GoogleEarthEngine,觉得很好玩,也很有应用前景,关键是免费的地理计算云平台。所以想认真学习下,学习过程中作些小的总结和记录,资料来源均为网络或GoogleEarthEngineAPI指南,今天先讲讲入门的知识。1、GoogleEarthEngine介绍   GoogleEarthEngine是Google提供的对大量全球尺度地球科学资料(尤其是…

  • 非局部均值滤波算法[通俗易懂]

    非局部均值滤波算法[通俗易懂]2016.09.09更新,修改了SSIM中值太大的问题首先谈一下什么是非局部均值滤波。在此之前,我们先来看一下均值滤波的原理。均值滤波均值滤波的计算非常简单,将图像像素点灰度记录在数组中,然后设置方框半径的值,然后将方框中的所有点的像素求和取平均,得到的结果就是均值滤波后对应像素点的灰度值。优点:计算很快而且简单从算法可以看出,只是求了平均,并没有很复杂的计算缺点:得到的图像很模

  • Android 开机动画源码分析

    Android 开机动画源码分析Android系统在启动SystemServer进程时,通过两个阶段来启动系统所有服务,在第一阶段启动本地服务,如SurfaceFlinger,SensorService等,在第二阶段则启动一系列的Java服务。开机动画是在什么时候启动的呢?通过查看源码,Android开机动画是在启动SurfaceFlinger服务时启动的。SystemServer的main函数首先调用init1来启动本地服务,

  • PHP实现打印出库单,有没有实现过?

    PHP实现打印出库单,有没有实现过?

    2021年10月28日
  • 分层抽样不按比例如何加权_按比例分层抽样和定额抽样的区别?

    分层抽样不按比例如何加权_按比例分层抽样和定额抽样的区别?从宏观上,两者的目的都是为了提供更好的样本代表性,并且两者的理论基础都来自于:总体的个体的同质性越高,抽样误差越小,样本的代表性越好。两者的本质区别在于是否以概率为基础,比例分层抽样是概率抽样而后者是非概率抽样。从最宏观的角度来说,比例分层抽样产生的样本是随机抽样样本,其本身可以进行抽样误差的评估和推断检验,进而把你样本的结论推广到总体。而定额抽样本身不具备这种可能。从具体操作上,两者都需要选取一…

发表回复

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

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